javascript - 使用不同事件的相同功能

Question

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

我想触发一个函数来移动一个 div onmouseover 和另一个 onmouseout。我想在几个不同的 div 上调用这个相同的函数。如果不编写多个函数，我将如何做到这一点？

  <div id="indexJoinBanner" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
  <!-- end #indexJoinBanner --></div>
  <div id="indexJoinBanner2" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
  <!-- end #indexJoinBanner2 --></div>



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

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

谢谢

Answer 1

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

.hover允许您同时绑定 mouseover 和 mouseout，但您也可以单独绑定它们。

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

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

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

Answer 2

您可以将 div 传递给函数，例如

<div id="indexJoinBanner" onmouseover="moveDivRight(this)" onmouseout="moveDivLeft(this)"> 

并在函数中使用

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 );
})

演示

Answer 3

<div id="indexJoinBanner" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"></div>
<div id="indexJoinBanner2" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"></div>

<script>
$(document).ready(function() {
    $('#indexJoinBanner').mouseover(function() {
        $(this).animate({left: '0px'});
    });

    $('#indexJoinBanner2').mouseover(function() {
        $(this).animate({left: '0px'});
    });

    $('#indexJoinBanner').mouseout(function() {
        $(this).animate({left: '-150px'});
    });

    $('#indexJoinBanner2').mouseout(function() {
        $(this).animate({left: '-150px'});
    });
});
</script>