Question

我希望每次点击都与表boxes中的正确匹配相关联。

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没有块范围，只有函数范围。这就是为什么在循环中创建函数是棘手的。每个闭包都引用同一个变量（在您的情况下为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])));
}

<强> OT ：

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

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

Answer 2

试试这个：

var J = jQuery.noConflict();

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

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

function toggleHandler(k) {
  J( boxes[k][1] ).toggle();
}

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

Answer 3

对于可读且易于理解的代码，将元素上的目标框存储为“数据”？

for(var k=0;k<bNumber;k++) {
 J(boxes[k][0]).data("box") = $(boxes[k][1]);
 J(boxes[k][0]).click( function() {           
  J(this).data("box").toggle();
 });
}

每个.click的唯一var（function（）{..}）;

3 个答案: