jquery - 如何使用 jQuery 分配 dame 类选择器但不同的数组？

Question

我正在尝试将部分代码从 JavaScript 转换为 jQuery 等效项以进行测试。 JavaScript 的一部分如下所示:

var cbtn = document.getElementsbyClassName("calcbutton");
console.log(cbtn);

for(var i=0; i < cbtn.length; i++) {
cbtn[i].addEventListener("click", function(){
     console.log("clicked");
  });
}

我翻译成这个 jQuery 等价物:

$(function() {
    var cbtn = $(".calcbutton");
    console.log(cbtn);

    for(var i=0; i < cbtn.length; i++) {

        cbtn[i].click( function(){
            console.log("Clicked!");
        });
    }
});

选择器 calcbutton 的所有类都具有相同的名称。我试图使每个单独的 calcbutton 都是唯一的，并在 calcbutton[0]、calcbutton[1]、... 中明确分配数组，其中实际数组用作唯一标识符。看起来 jQuery 版本不起作用。在这方面需要帮助。

Answer 1

cbtn 是一个 jQuery 对象，在该集合上执行 [n] 即可检索它的 JS DOM 元素表示，
为了在该元素上使用 jQuery 方法，例如 .click() 等，您需要将其重新分配给 jQuery，从而将其再次包装回 jQuery 对象中。

此外，不要在 for 循环内创建函数，而是将函数移到外部 - 并且仅在循环内实例化它，并将当前迭代 i 作为参数传递。 (或者最终使用闭包):

$(function() {
  var cbtn = $(".calcbutton");
  
  // Don't make functions within for loops!
  // Instead define it outside and pass arguments (`i` in this case)
  function doSomething(i) {
    $(cbtn[i]).click(function() {
      console.log("Clicked index: "+ i);
    });
  }
  
  for (var i = 0; i < cbtn.length; i++) {
    doSomething(i); // ...instead
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="calcbutton">1</button>
<button class="calcbutton">2</button>

所以您的问题是，在您的 for 循环中，您在同一元素集合上重新分配了 i 次点击处理程序。由于它是一个循环，因此在退出时 [i] 将始终引用最后一个索引。

使用匿名闭包函数的示例:

$(function() {
  var cbtn = $(".calcbutton");

  for (var i = 0; i < cbtn.length; i++) {
    (function(i) { // Closure
      $(cbtn[i]).click(function() {
        console.log("Clicked index: " + i);
      });
    }(i)); // Instantiate and pass argument
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="calcbutton">1</button>
<button class="calcbutton">2</button>

使用 jQuery 代替:

我看不出有任何理由这样做，因为使用 jQuery 你可以简单地这样做:

$(function() {

  var cbtn = $(".calcbutton");
  // console.log(cbtn);

  cbtn.click(function(){
    console.log("Clicked!"+ cbtn.index(this)); // to get the index of the clicked one
    // console.log( this );    // DOM Element
    // console.log( $(this) ); // jQuery object (Element)
  });

});

其中 click 方法被分配(内部已经使用 for 循环)到每个 .calcbutton 元素。要检索实际单击的元素，请使用 this 关键字(参见上面的示例)或使用 $(this) → 如果您需要使用 jQuery 处理该元素。