Question

我试图创建一个for循环，它将重现以下功能代码块，但是以更有吸引力的方式。这适用于找到here on stackoverflow

的Soundcould小部件API实现

$(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));
    });
});

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

Answer 2

即使Javascript是一种非常强大的语言，您也必须在循环参数中添加var前缀：

for(var i = 0; i < 10; i++)

编辑＃1：

刚刚看到你向你的选择者添加了一些'

"'#goTo5'"

应该是：

"#goTo5"

或者：

'#goTo5'

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

2 个答案: