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');
    });
});

Answer 2

让我们在这里看看您的尝试：

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]);
    });
};

问题在于，变量index对于由事件侦听器创建的每个闭包都是相同的。因此，index的值在循环结束后始终是相同的。每次调用index的{{1}}的值为selectFinal，2以及a[2]的值为b[2]。

要解决此问题，只需像这样更改循环：

undefined

这里我们使用的是for (let index = 0; index < a.length; ++index) { $(a[index]).click(function(){ selectFinal(a[index], b[index]); }); };声明的块范围变量，导致在每个事件侦听器中使用正确的值。

您可以在let和let上找到更多信息，并在此处关闭：http://www.jstips.co/en/javascript/keyword-var-vs-let/

如何动态地基于数组附加单击事件监听器？

2 个答案: