Question

有

＆＃13;

/* 1 */
$("div").click(function(e) {
  alert(".click() called on '" + e.currentTarget.id + "'");
});

/* 2 
$("div").each(function(){
    $(this).click(function(e) {
      alert(".click() called on '" + e.currentTarget.id + "'");
    });
});
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="target 1">
  The Target One
</div>
<div id="other 2">
  The Target TWO
</div>

＆＃13;

两个函数1和2有什么区别，知道结果是一样的？！...

Answer 1

对于简单地将事件处理程序附加到一堆元素的用例，两个解决方案之间没有区别。

以下是两种方法的更多细节：

JQuery的each相当于Array.prototype.forEach。它为您提供了迭代数组的每个元素（或更常见的语音 - 集合）的选项。通常它用于执行上下文敏感函数（使用输入集合的不同元素执行特定操作）。在您的示例2中，您可以插入if子句以排除某些div元素接收点击处理程序或执行其他内容，这些内容不应该放在事件处理程序中。

选项1是附加事件处理程序的简单方法。因为在本机javascript中你没有选择一次定位几个元素（但这是一个非常常见的用例），你“手动”必须迭代你的HTML元素集合。然而，这不是最简单的任务，因为返回的NodeList没有使用一种简单的方法来迭代它的元素*。 vanilla js的一个常见方法是从Array原型中借用迭代函数并创建这样一个怪物：

Array.prototype.forEach.call(document.querySelectorAll("element"),
    function(element){element.addEventListener("type",
       function(){/* code */}
    )}
);

jQuery通过简单地接受元素集合使这变得容易，然后在后台迭代集合并将事件处理程序附加到每个元素。

$("element").on("type(s)",function(){/* code */})

甚至更容易

$("element").<type>(function(){/* code */})

*不久前为NodeLists添加了一个interator函数，但仍然没有全局支持。

Answer 2

主要区别在于jQuery .each()函数允许您访问被迭代的元素的索引，并允许您执行函数，但在您的情况下，没有功能差异所以你应该使用第一个版本，它的语法更容易写/读。

jQuery：需要我一个＆＃34;每个＆＃34;每一次＆＃34;点击＆＃34;项目？

2 个答案: