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 [0]，calcbutton [1]中明确指定的数组使每个单独的calcbutton唯一，...显式地将实际数组作为唯一标识符。看起来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处理该元素。

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

1 个答案:

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