Javascript 使用不同事件的相同函数

这看起来很简单，但我搞不懂。我不熟悉javascript/jquery

我想触发一个函数，在mouseover上移动一个div，在mouseout上移动另一个div。我想在几个不同的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 );
}

函数moveDivRight（）{
$（“#索引JoinBanner”）。设置动画({
左：“0px”，
},500 );
};
函数moveDivLeft（）{
$（“#索引JoinBanner”）。设置动画({
左：“-150px”，
},500 );
}

谢谢

.hover

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

您可以使用

this

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

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

注意：在此解决方案中，HTML中根本不需要

onmouseover

等属性。

<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>

$（文档）.ready（函数（）{
$（'#indexJoinBanner'）.mouseover（函数（）{
$（this.animate（{left:'0px'}）；
});
$（'#indexJoinBanner2'）。鼠标悬停（函数（）{
$（this.animate（{left:'0px'}）；
});
$（'#indexJoinBanner'）.mouseout（函数（）{
$（this.animate（{left:'-150px'}）；
});
$（'#indexJoinBanner2'）.mouseout（函数（）{
$（this.animate（{left:'-150px'}）；
});
});

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

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

此属性中的

指定当前元素

或者，您可以使用

.on（）

而不是onmouseover和onmouseout属性来附加处理程序，然后为要附加处理程序的所有元素指定一个类

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

---

传递一个标识

div

的参数。哦，看，多个函数，就像OP不想要的一样！非常感谢。我不接受这一点，因为我不想在每次添加另一个div时都向函数添加一行。尽管如此，仍然可以正常工作。谢谢“向函数中添加一行”是什么意思？您的意思是添加到选择器吗？那就不要用身份证。给每一个你想拥有这些动画属性的div一个类，然后绑定到这个类。尽管我喜欢你第二个方法的理论。我无法让它工作。然而，您的第一种方法非常有效。谢谢

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

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

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