javascript - 如何基于数组动态附加点击事件监听器？

Question

好吧...请不要因为这段代码看起来多么恶心而恨我，但我正在努力优化它。我想为两个数组中的每组变量重新运行属性，但我似乎无法让它工作。我还尝试过其他方法，例如使用 for 循环，但也没有运气。谁能指导我找到一些可以帮助我更好地了解我可以在这里做什么的资源？

这是原始代码:

<script>
$('.selectTrackThree').click(function(){
    selectFinal(".selectTrackThree", "#trackThreeDiv");
});
$('.selectTrackFour').click(function(){
    selectFinal(".selectTrackFour", "#trackFourDiv");
});
$('.selectTrackFive').click(function(){
    selectFinal(".selectTrackFive", "#trackFiveDiv");
});
$('.selectTrackSix').click(function(){
    selectFinal(".selectTrackSix", "#trackSixDiv");
});
$('.selectTrackSeven"').click(function(){
    selectFinal(".selectTrackSeven", "#trackSevenDiv");
});
$('.selectTrackEight').click(function(){
    selectFinal(".selectTrackEight", "#trackEightDiv");
});
$('.selectTrackNine').click(function(){
    selectFinal(".selectTrackNine", "#trackNineDiv");
});
$('.selectTrackTen').click(function(){
    selectFinal(".selectTrackTen", "#trackTenDiv");
});
$('.selectTrackEleven').click(function(){
    selectFinal(".selectTrackEleven", "#trackElevenDiv");
});
$('.selectTrackTwelve').click(function(){
    selectFinal(".selectTrackTwelve", "#trackTwelveDiv");
});
$('.selectTrackThirteen').click(function(){
    selectFinal(".selectTrackThirteen", "#trackThirteenDiv");
});
$('.selectTrackFourteen').click(function(){
    selectFinal(".selectTrackFourteen", "#trackFourteenDiv");
});
$('.selectTrackFifteen').click(function(){
    selectFinal(".selectTrackFifteen", "#trackFifteenDiv");
});
$('.selectTrackSixteen').click(function(){
    selectFinal(".selectTrackSixteen", "#trackSixteenDiv");
});
$('.selectTrackSeventeen').click(function(){
    selectFinal(".selectTrackSeventeen", "#trackSeventeenDiv");
});
</script>

这是我使用 for 循环对其进行优化的尝试:

<script>
var index;
var a = [".selectTrackOne", ".selectTrackTwo"];
var b = ["#trackOneDiv", "#trackTwoDiv"];
for (index = 0; index < a.length; ++index) {
    $(a[index]).click(function(){
        selectFinal(a[index], b[index]);
    });
});
</script>

Answer 1

看来您不需要两个数组。只有一个 - 拼写出的数字列表。

尝试一下以下内容:

var numbers = ['One', 'Two', 'Three'];

numbers.forEach(function (number) {
    $('.selectTrack' + number).click(function () {
        selectFinal('.selectTrack' + number, '#track' + number + 'Div');
    });
});