javascript - 编写 for 循环以使用数组创建多个方法

Question

我正在尝试创建一个 for 循环，它将重现以下功能代码块，但以一种更具吸引力的方式。这是与 Soundcould 小部件 API 实现一起使用的 here on stackoverflow

$(document).ready(function() {
  var widget = SC.Widget(document.getElementById('soundcloud_widget'));
    widget.bind(SC.Widget.Events.READY, function() {
  console.log('Ready...');
});}

$('#goTo5').click(function()  {widget.seekTo(300000);});
$('#goTo10').click(function() {widget.seekTo(600000);});
$('#goTo15').click(function() {widget.seekTo(900000);});
$('#goTo20').click(function() {widget.seekTo(1200000);});
$('#goTo25').click(function() {widget.seekTo(1500000);});
$('#goTo30').click(function() {widget.seekTo(1800000);});
$('#goTo35').click(function() {widget.seekTo(2100000);});
$('#goTo40').click(function() {widget.seekTo(2400000);});
$('#goTo45').click(function() {widget.seekTo(2700000);});
$('#goTo50').click(function() {widget.seekTo(3000000);});  */
});

这是我用数组创建循环来写入行的无效尝试:

$(document).ready(function() {
  var widget = SC.Widget(document.getElementById('soundcloud_widget'));
    widget.bind(SC.Widget.Events.READY, function() {
  console.log('Ready...');
});

var goToId = [ "'#goTo5'", "'#goTo10'", "'#goTo15'", "'#goTo20'", '#goTo25', '#goTo30', '#goTo35', '#goTo40', '#goTo45', '#goTo50'];
var goToTime  = [ 300000, 600000, 900000, 1200000, 1500000, 1800000, 2100000, 2400000, 2700000, 300000];    

for (i=0, i<10, i++)
  {
    $(goToId[i]).click(function()
      {
        widget.seekTo(goToTime[i]);
      });
  }
});

谁能告诉我我做错了什么？

Answer 1

您已经为变量 i 编写了一个闭包，但是当函数执行时i已增加超过数组的边界。您可以通过创建一个生成新函数的函数，并将封闭的变量作为参数传递给外部函数来解决这个问题，如下所示:

var clickFunc = function(seek) {
    return function() { widget.seekTo(seek); };
}
for (i=0; i<10; i++) {
    $(goToId[i]).click(clickFunc(goToTime[i]));
}

此外，我相信您必须删除 goToId 中的单引号或双引号数组:

var goToId = [ "#goTo5", "#goTo10", ... ];
// or
var goToId = [ '#goTo5', '#goTo10', ... ];

或者，如果您愿意，如果您像这样编写循环，则可以完全删除两个数组:

var clickFunc = function(id, seek) {
    $(id).click(function() { widget.seekTo(seek); });
}
for (i = 1; i <= 10; i++) {
    clickFunc("#goTo" + (5*i), 300000 * i);
}

或者实现像 net.uk.sweet hinted at 这样的解决方案，首先为您的所有 #goToN 分配一个 CSS 类元素，例如 .goToButton像这样(我使用 <a> 元素进行演示，但您使用的元素的实际类型并不重要):

<a id="goTo5" class="goToButton" href="#">5</a>
<a id="goTo10" class="goToButton" href="#">10</a>
<a id="goTo15" class="goToButton" href="#">15</a>
...

然后使用 jQuery each 方法:

$('.goToButton').each(function(i) {
    $(this).click(function() {
        widget.seekTo(300000 * (i+1));
    });
});

请注意，这取决于您绑定(bind)到的元素在文档中的顺序是否正确。如果它们不按顺序排列，您可能需要对此脚本进行调整。