javascript - 每个 .click( function() {..} ) 都有唯一的 var;

Question

我希望每次点击都与表框中的正确出现相关联。

var J = jQuery.noConflict();

const   bNumber = 2;
var boxes   = new Array(bNumber);

boxes[0]    = new Array("#cch", "#cc");
boxes[1]    = new Array("#sinh", "#sin");

for(var k=0;k<bNumber;k++) {
 J( boxes[k][0] ).click( function() {           
  //J( boxes[k][1] ).toggle();
 });
}

使用此解决方案，每次点击都与 boxes[2][1] 关联

Answer 1

JavaScript 没有 block 作用域，只有函数作用域。这就是为什么在循环中创建函数很棘手的原因。每个闭包都有对同一变量的引用(在您的情况下是 k )。在循环的最后一次迭代之后，k 的值为 2。

要捕获循环计数器的当前值，您必须引入一个新的作用域，即调用一个函数。例如。具有立即函数:

for(var k=0;k<bNumber;k++) {
    (function(index) {
        J( boxes[index][0] ).click( function() {           
            J( boxes[index][1] ).toggle();
        });
    }(k));
}

另一种方法是创建一个生成点击处理程序的函数:

function getClickHandler(element) {
    return function() {element.toggle()});
}

for(var k=0;k<bNumber;k++) {
    J(boxes[k][0] ).click(getClickHandler(J(boxes[k][1])));
}

<小时/>

加类:

您不应该使用new Array来初始化数组。无需预先定义数组的大小。使用数组文字表示法更简洁:

var boxes = [["#cch", "#cc"], ["#sinh", "#sin"]];