使用不同事件的相同function

这看起来很简单，但我无法弄清楚。 我是javascript / jquery的新手。

我想触发一个函数移动div onmouseover，另一个onmouseout。 我想在几个不同的div上调用这个相同的函数。 如果不编写多个函数，我该怎么做？

 
 
 
 function moveDivRight(){ $("#indexJoinBanner").animate({ left: "0px", },500 ); }; function moveDivLeft() { $("#indexJoinBanner").animate({ left: "-150px", },500 ); } 

谢谢

Answer 1

您可以将div传递给函数

并在函数中使用它

 function moveDivRight(div){ $(div).animate({ left: "0px", },500 ); }; function moveDivLeft(div) { $(div).animate({ left: "-150px", },500 ); } 

this在属性中指定当前元素。

或者你可以使用.on()而不是onmouseover和onmouseout属性附加处理程序，给你想要附加处理程序的所有元素一个类然后

 $('.someclass').on('mouseover', function () { $(this).animate({ left: "0px", },500 ); }).on('mouseout', function () { $(this).animate({ left: "-150px", },500 ); }) 

DEMO

Answer 2

 $("#indexJoinBanner, #indexJoinBanner2").hover(function () { $(this).animate({left: '0px'}, 500); }, function () { $(this).animate({left: '-150px'}, 500); }); 

.hover允许您同时绑定鼠标hover和鼠标输出，但您也可以单独绑定它们。

您可以使用this来引用作为绑定目标的对象（即使您一次绑定到多个元素）。

如果需要，还可以绑定命名函数。

注意 ：在此解决方案中，HTML中根本不需要onmouseover等属性。

Answer 3