Question

我在Javascript中编写例程，遍历HTML页面中的所有音频元素。所有元素都标有ID，其形式为＆＃39; track_ [nr]＆＃39;每个人都有一个自定义按钮，用于切换标有ID＆＃39; control_ [nr]＆＃39;的播放/暂停。

现在我想通过迭代所有元素并分配onclick函数来自动化每个控制元素上的onclick事件。

我提出了以下代码，但＆＃34; for＆＃34;循环并不像我期待的那样。

＆＃34; document.writeln（J）＆＃34;总是打印5（我当前有5个音频元素），无论我点击哪个控制元素。我希望它能写出＆＃34; 0＆＃34;当你点击＆＃34; control_0＆＃34;，＆＃34; 1＆＃34;点击＆＃34; control_1＆＃34;等等

非常感谢任何帮助！

<script type='text/javascript'>
    var audio = new Array();
    var ctrl = new Array();
    var i = 0;

    do {
        audio[i] = document.getElementById('track_'+i), ctrl[i] = document.getElementById('control_'+i);
        i++;
    } while(audio[i-1]);
    tracks=i-1;

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

此致

Answer 1

首先，你必须控制_＆＃39;不是＆＃39; ctrl _＆＃39;在JS中！但是，你的主要问题是onclick函数是一个闭包，这意味着它没有在其定义中使用j的值，它使用由for循环更改的实际变量j。您需要创建一个以j作为参数并返回处理程序的函数。这是有效的，因为j的值被传递到函数中。

＆＃13;

var audio = new Array();
    var ctrl = new Array();
    var i = 0;

    do {
      audio[i] = document.getElementById('track_' + i), ctrl[i] = document.getElementById('ctrl_' + i);
      i++;
    } while (audio[i - 1]);
    tracks = i - 1;

    function makeHandler(j) {
      return function() {
        alert(j);
      };
    }
    for (var j = 0; j < tracks; j++) {
      ctrl[j].onclick = makeHandler(j);
    }

＆＃13;

button {
  display: block;
}

＆＃13;

<button id="ctrl_0">Button 0</button>
<button id="ctrl_1">Button 1</button>
<button id="ctrl_2">Button 2</button>
<button id="ctrl_3">Button 3</button>
<button id="ctrl_4">Button 4</button>
<button id="ctrl_5">Button 5</button>

<div id="track_0">placeholder 0</div>
<div id="track_1">placeholder 1</div>
<div id="track_2">placeholder 2</div>
<div id="track_3">placeholder 3</div>
<div id="track_4">placeholder 4</div>
<div id="track_5">placeholder 5</div>

＆＃13;

Answer 2

ctrl[j].onclick = function () {
    document.writeln(j);
}

这段代码的作用是，它将一个写j值的函数分配给元素的onclick事件监听器

一旦for循环结束，它就会将函数分配给相应的元素，j的值将等于页面中元素的数量。

执行实际功能时。它打印＆＃34; j＆＃34;的值。

要获得所需的结果，您需要使用闭包。看看这个answer

Answer 3

另一种方法：您还可以将trackId存储在DOM元素本身的data属性中。

for (var j = 0; j < tracks; j++) {
    ctrl[j].setAttribute("data-trackId", j);
    ctrl[j].onclick = function(event) {
        console.log(event.toElement.getAttribute("data-trackId"));
    }
}

Answer 4

将您的for循环更改为：

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

您创建一个新函数并将其分配给每个元素。否则，由于闭包，所有值都将为5。

Javascript：＆＃34; onclick＆＃34;功能＆＃34; for＆＃34;循环不解决变量

4 个答案: