javascript - 具有动态元素属性的多个 :not()

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并且在你的小提琴中，你有一部分在点击时设置父元素的数据可能更简单：

$('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'));
});