3

我有一个从 json 恢复数据并生成产品列表的页面。当单击将父 ul 更改为 ul.fullview 的按钮时，用户可以在两种不同的样式之间切换。浏览带有 ul.fullview 的产品时，收到 .highlighted 类的产品应该以更大的缩略图显示，而其他产品会收到一个绝对位置以适应布局。这一切都由 CSS 和一个简单的 toggleClass() 完成。问题在于这两个不同视图中的 mouseenter / mouseleave 事件。使用默认视图浏览时，所有产品都应具有相同的动画。当父ul为.fullview时，.highlighted产品必须有不同的动画。由于我使用的是动态添加的元素，因此我不得不使用 .on() 而不是 .hover()。

$('div.products ul:not(.fullview) li:not(.highlighted)').hover(
  function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

$('li.highlighted').hover(
  function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

如果元素不是由 javascript 添加的，上面的代码应该可以工作。我能够使用下面的脚本使默认视图工作：

$('div.products ul').on({
    mouseenter: function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },
    mouseleave: function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li');

但是当我添加这些行时，它会停止加载 json 数据：

$('div.products ul.fullview').on({
    mouseenter: function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },

    mouseleave: function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li.highlighted');

我究竟做错了什么？

4

2 回答 2

2

你是说：

将父 ul 更改为 ul.fullview

我会假设ul.fullview在绑定时它是动态的，它只是一个ul没有“fullview”类但随后动态更改为拥有该类。

试试这个：

$('div.products').on({
    mouseenter: function() {
        $(this).find($('div.description')).show();
        $(this).find($('div.facebook-like')).fadeIn(150);
    },

    mouseleave: function() {
        $(this).find($('div.description')).fadeOut(150);
        $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'ul.fullview li.highlighted');​
于 2012-08-17T20:57:06.250 回答
1

为了您的方便，我将这两个答案结合到了JSFiddle中。括号和选择器根据其他人的答案进行了调整。

于 2012-08-17T21:30:35.267 回答