将一个事件处理程序分配给多个元素？

Question

好的，我已经完成了建议的 q/a，但他们似乎没有明确或根本没有回答这个问题。

我想减少混乱并一次将一个事件处理程序分配给多个图像，而不是单独分配。这是当前代码重复的代码：

$(document).ready(function(){

      $("#div1 img:eq(0)").mouseenter(function(){
                     $(this).css("border","1px solid green"); 
     })

      $("#div1 img:eq(1)").mouseenter(function(){
                     $(this).css("border","1px solid green); 
     })

      $("#div1 img:eq(2)").mouseenter(function(){
         $(this).css("border","1px solid green"); 
     })

})

在普通的 javascript 中，我可能做过类似的事情：

div1imgs=documentGetElementById("div1").getElementsByTagName("img");

for(i=0; i<div1imgs.length; i++) {
 div1imgs[i].onmouseover=function(){this.style.border="1px solid green"}

只是使用它很诱人，但我正在进入 jquery 并且更喜欢保留它 jquery。在 jquery 中是否有一些等效的解决方案，希望能够更简单地将事件处理程序同时分配给一组图像？也使用循环，或者其他？

Answer 1

根据您的原版 js 版本，应该是这样的：

$("#div1 img").mouseenter(function () {
    $(this).css("border","1px solid green"); 
});

注意，当您使用 jQuery 将事件绑定到多个元素时，它会自动循环遍历每个单独的元素来执行绑定。