Javascript: "onclick"循环中的 "for"函数无法解析变量

Question

我正在用 Javascript 编写一个例程，用于循环访问 HTML 页面中的所有音频元素。所有元素都标有“track_[nr]”形式的 ID，每个元素都有一个自定义按钮，用于切换标有 ID“control_[nr]”的播放/暂停。

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

我想出了以下代码，但“for”循环的行为并不像我预期的那样。

“document.writeln(j)”总是打印 5(我当前有 5 个音频元素)，无论我单击哪个控制元素。我希望当你点击“control_0”时它会写“0”，当你点击“control_1”时它会写“1”，等等。

非常感谢任何帮助!

<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

首先，JS 中使用的是“control_”而不是“ctrl_”! 但是，您的主要问题是 onclick 函数是一个闭包，这意味着它在其定义中不使用 j 的值，它使用由 for 循环更改的实际变量j。您需要创建一个将 j 作为参数并返回处理程序的函数。这是有效的，因为 j 的值被传递到函数中。

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

button {
  display: block;
}

<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>