1

我的功能是触发第二个mouseleave()事件而不是第一个事件，导致nth-child(1)&nth-child(2)有一个 .css 属性，bottom:99px当我希望他们使用将mouseleave()属性设置为的第一个事件时bottom:94px

经过一些研究，我相当确定我需要关闭我的（this）语句，以便当我在第二轮参数中调用它时，它可以在新范围内工作..？

$(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可能是window，因此$('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 回答