javascript - 多个 :not() with dynamic element attribute

Question

这里是演示 http://jsfiddle.net/NbzaE/3/

我正在尝试做什么:

如果.list-item的属性data-attr为true，则禁用动画

这是工作示例:

$('.list-item > a:not(.active)').hover(function(){
        $(this).clearQueue().stop().animate({
            marginLeft: 40
        }, 250);
    }, function(){
        $('.list-item:not([data-attr="true"]) > a:not(.active)').clearQueue().stop().animate({
            marginLeft: 0
        }, 250);
 });

但我不确定这是否正确。有什么想法吗？

Answer 1

您确实应该使用 mouseenter、mouseleave 事件，基于:http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event在你的 fiddle 中，你有一部分在点击时为父元素设置数据，这可能会更简单:

$('li.list-item').on('mouseenter', '>a:not(.active)', function () {
    $(this).clearQueue().stop().animate({
        marginLeft: 40
    }, 250);
});
$('li.list-item').on('mouseleave', '>a:not(.active)', function () {
    $(this).clearQueue().stop().animate({
        marginLeft: 0
    }, 250);
});

$('.list-item[data-toggle="collapse"] ').on('click', '>a', function () {
    $(this).parent().data('attr', !$(this).parent().data('attr'));
});

EDIT1:旁注，您还可以在元素上而不是在保存 .parent() 遍历的链接上捕获第二个事件，如下所示:

$('.list-item[data-toggle="collapse"] ').click( function () {
    $(this).data('attr', !$(this).data('attr'));
});

如果您动态创建附加到 ul 的 li 元素:

$('ul').on('click', '.list-item[data-toggle="collapse"] ', function () {
    alert($(this).data('attr'));
    $(this).data('attr', !$(this).data('attr'));
});