Javascript中，在“for”循环中的“onclick”函数无法解析变量。

10 浏览
0 Comments

Javascript中，在“for”循环中的“onclick”函数无法解析变量。

我正在用Javascript编写一个例程，它遍历HTML页面中的所有音频元素。所有元素都以\'track_[nr]\'的形式标记为ID，并且每个元素都有一个自定义按钮，该按钮以\'control_[nr]\'的ID标记为播放/暂停切换。\n现在我想通过遍历所有元素并分配一个点击事件来自动化每个控制元素上的onclick事件。\n我想出了下面的代码，但是\"for\"循环的行为不像我期望的那样。\n无论在哪个控制元素上点击，\"document.writeln(j)\"始终打印5（我当前有5个音频元素）。当您点击\"control_0\"时，我希望它写入\"0\"，点击\"control_1\"时写入\"1\"，依此类推。\n非常感谢任何帮助！\n

\n谢谢！

0

3 答案

0 Comments

问题的原因是因为闭包的原因，如果直接在for循环中给每个元素赋值一个函数，那么所有的值都会是5。解决方法是创建一个新的函数，并将其分配给每个元素，以避免闭包的问题。具体代码如下：

for (var j = 0; j < tracks; j++) {
    ctrl[j].onclick = function (index) {
        return function(){ alert(index); }
    }(j);
}

0
0 Comments

Javascript中的一个常见问题是，在for循环中使用onclick函数时，无法解析变量。这种情况下，代码中的onclick函数会获取到错误的变量值。

造成这个问题的原因是，当for循环执行完毕后，onclick函数会将最后一个循环的变量值赋给所有的元素。因此，当点击元素时，打印出的变量值始终是循环结束时的值。

为了解决这个问题，可以使用闭包。闭包是指内部函数可以访问外部函数的变量。通过创建一个立即执行的匿名函数，并将变量作为参数传递给它，可以在每次循环中创建一个新的作用域，从而保持每个元素的变量值不同。

下面是解决该问题的代码示例：

for (var j = 0; j < ctrl.length; j++) {
  (function(j) {
    ctrl[j].onclick = function() {
      document.writeln(j);
    }
  })(j);
}

在上面的代码中，我们创建了一个立即执行的匿名函数，并将变量j作为参数传递给它。这样，在每次循环中都会创建一个新的作用域，使得每个元素的onclick函数都能够访问到正确的变量值。

通过使用闭包，我们解决了在for循环中使用onclick函数时无法解析变量的问题。现在，当点击元素时，打印出的变量值将会是每个元素对应的值，而不是循环结束时的值。

如果你想了解更多关于闭包的内容，可以查看这个回答。

0
0 Comments

JavaScript中的问题是，在for循环中使用"onclick"函数无法解析变量。这个问题的原因是onclick函数是一个闭包，它不使用定义中的变量值j，而是使用被for循环改变的实际变量j。需要创建一个接受j作为参数并返回处理程序的函数。这样做是因为j的值被传递给函数。

首先，将数组audio和ctrl初始化为空数组，将变量i初始化为0。

然后，使用do-while循环，将ID为'track_'+i的元素赋值给audio[i]，将ID为'ctrl_'+i的元素赋值给ctrl[i]。每次循环结束后，i自增1。当audio[i-1]不存在时，循环结束。此时，tracks的值为i-1。

接下来，定义一个makeHandler函数，它接受参数j，并返回一个函数。这个函数弹出j的值。

最后，使用for循环，将makeHandler(j)赋值给ctrl[j]的onclick属性。

在CSS中，定义了button元素的display为block。

在HTML中，定义了多个button元素和div元素，它们的ID分别为'ctrl_0'、'ctrl_1'、'ctrl_2'等和'track_0'、'track_1'、'track_2'等。这些元素的内容仅作为占位符。

通过将makeHandler函数添加到代码中，问题得到了解决。关于"control_"和"ctrl_"之间的区别：这是一个拼写错误，在代码的HTML部分，元素的ID实际上是"control_"。我会在原始帖子中进行更正。

0