3

これはかなり単純に思えますが、私には理解できません。javascript/jqueryは初めてです。

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

ありがとう

4

3 に答える 3

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

.hoverマウスオーバーとマウスアウトを同時にバインドできますが、別々にバインドすることもできます。

バインディングのターゲットであるオブジェクトを参照するために使用できますthis（一度に複数の要素にバインドする場合でも）。

必要に応じて、名前付き関数をバインドすることもできます。

注：このソリューションではonmouseover、などの属性はHTMLではまったく必要ありません。

于 2012-08-25T22:17:00.910 に答える
3

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

デモ

于 2012-08-25T22:26:01.610 に答える
-2 
<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>
于 2012-08-25T22:17:22.913 に答える