1

私の関数はmouseleave()、最初のイベントではなく 2 番目のイベントをトリガーしているためnth-child(1)、プロパティをnth-child(2)bottom:99pxmouseleave()bottom:94px

いくつかの調査の結果、（この）ステートメントを閉じて、2回目の引数で呼び出したときに新しいスコープ内で機能するようにする必要があると確信しています..？

$(document).ready(function(){

    $('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)",this , function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });

    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"94px"}, "fast");    
    }); 

// need closure here? 

    $('#rows').on('mouseenter', "div.row div:nth-child(3), div.row div:nth-child(4)",this , function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });

    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"99px"}, "fast");    
    });
});
4

2 に答える 2

1

私はあなたがこれを望んでいると推測します：

$('#rows').on('mouseenter', "div.row div:nth-child(1), div.row div:nth-child(2)", this , function() {
    $('img', this).stop().animate({"bottom":"0px"}, "fast");

    // when placed inside, the value of this makes more sense?
    $('div', this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"94px"}, "fast");    
    }); 
});

あなたが書いたこのステートメントでは、の値thisはおそらく iswindowであるため$('div', this)、ページ上のすべての div がターゲットになります。

$('div', this).off("mouseleave").on("mouseleave", function() {
    $('img',this).stop().animate({"bottom":"94px"}, "fast");    
});
于 2012-05-19T15:21:38.810 に答える
0

おそらく次のものが必要だと思います。このコードはテストされていませんが、少なくとも要点はわかります。

$( document ).ready( function () {

  var rows, selector, listeners = {};

  rows = $( '#rows' );

  listeners.mouseenter = function () {

    $( 'img', this ).stop().animate( { "bottom" : "0px" }, "fast" );

  };


  listeners.mouseleave = function ( event ) {

    $( 'img', this ).stop().animate(

      { "bottom" : event.data.bottom + "px" }, "fast"

    );

  };


  selector = "div.row div:nth-child(1), div.row div:nth-child(2)";

  rows.on( 'mouseenter', selector, listeners.mouseenter );

  rows.off( 'mouseleave', selector );

  rows.on( 'mouseleave', selector, { bottom : 94 }, listeners.mouseleave );


  selector = "div.row div:nth-child(3), div.row div:nth-child(4)";

  rows.on( 'mouseenter', selector, listeners.mouseenter );

  rows.off( 'mouseleave', selector );

  rows.on( 'mouseleave', selector, { bottom : 99 }, listeners.mouseleave );

} );

この場合、ハンドラー内にはthis、セレクター ( の n 番目の子) に一致する要素が含まdivれますdiv.row。

于 2012-05-19T15:47:22.050 に答える