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允许您同时绑定鼠标悬停和鼠标输出，但您也可以单独绑定它们。

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

如果您愿意，也可以绑定命名函数。

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

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

DEMO

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>

使用不同事件的相同功能

3 个答案: