当编号为id或类时，如何压缩我的JavaScript代码

Question

我的代码工作正常，但我觉得每次我必须添加一个新的列表项时，我都必须添加编号的相应函数，这是很乏味的。我想知道是否有一个JS技巧可以完成整个脚本，而不是每次重复代码。下面是第一个例子

$(document).ready(function () {

    $(".btn-slide_1").click(function () {
        $("#panel_1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_2").click(function () {
        $("#panel_2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_3").click(function () {
        $("#panel_3").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_4").click(function () {
        $("#panel_4").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_5").click(function () {
        $("#panel_5").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_6").click(function () {
        $("#panel_6").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_7").click(function () {
        $("#panel_7").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_8").click(function () {
        $("#panel_8").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_9").click(function () {
        $("#panel_9").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_10").click(function () {
        $("#panel_10").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_11").click(function () {
        $("#panel_11").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_12").click(function () {
        $("#panel_12").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_13").click(function () {
        $("#panel_13").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_14").click(function () {
        $("#panel_14").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_15").click(function () {
        $("#panel_15").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_16").click(function () {
        $("#panel_16").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_17").click(function () {
        $("#panel_17").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_18").click(function () {
        $("#panel_18").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

});

因此，它还链接到另一个div项，它类似于上面代码的多米诺骨牌或手风琴。因此，代码是非常重复的，但是我担心如果我不以这种方式重复它，那么它就不起作用了，但是我确信，有一种更合理的方法可以使这些函数正常工作。

var isAboutToggled = false;


$(document).ready(function () {

    $(".btn-slide-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $(".btn-slide-2").click(function () {
        $("#panel-2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $(".btn-slide-3").click(function () {
        $("#panel-3").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $("#panel-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-4").click(function () {
        $("#panel-4").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-5").click(function () {
        $("#panel-5").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-6").click(function () {
        $("#panel-6").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-7").click(function () {
        $("#panel-7").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-8").click(function () {
        $("#panel-8").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-9").click(function () {
        $("#panel-9").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-10").click(function () {
        $("#panel-10").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-11").click(function () {
        $("#panel-11").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-12").click(function () {
        $("#panel-12").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-13").click(function () {
        $("#panel-13").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-14").click(function () {
        $("#panel-14").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-15").click(function () {
        $("#panel-15").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-16").click(function () {
        $("#panel-16").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});


$(document).ready(function () {
    $("#panel-17").click(function () {
        $("#panel-17").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});


$(document).ready(function () {
    $("#panel-18").click(function () {
        $("#panel-18").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

Answer 1

正如注释所建议的，您应该对所有元素使用一个集体类，然后对它们执行其他代码。不管怎么想，就像一个程序员一样，很明显这个数字可以用作参数。

​

for (var i = 1; i <= 20; i++) {


  $(".btn-slide_" + i).click(function() {
    $("#panel_" + i).animate({
      width: 'toggle'
    });
    $(this).toggleClass("active");
    return false;
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​

但同样，最好使用一个querySelectorAll('.by-come-class').forEach(function(elem) { /* do stuff with elem */ })