javascript - 如何组合2个点击事件功能

Question

我目前有这个，它工作得很好，但我想有一种更好的方法来做同样的事情，可能有一个单一的功能，而不是两个独特的功能和保存行。 只是比这么多行更优雅的方式。正如您所看到的，以下两个函数看起来很相似，但它们的功能略有不同。 任何人？谢谢

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
}
}, ".gallery a img");

Answer 1

您可以使用逗号,或add()函数指定多个选择器:

$("#container, #container2, #container3")

更新

$("#container, #container2, #container3").on({
"mouseenter": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
},
"mouseleave": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
}
}, "img");