jquery - JQuery 不透明度过滤器

Question

我有一个简单的脚本，如果它们与选择不匹配，基本上将无序列表项的不透明度项调整为 0.1。

$('ul.filter li a').click(function() {
    var getvalue = $(this).attr('rel');
    $('.portfolioThumbs li.all').animate({opacity:0.1});
    $('.portfolioThumbs li.'+getvalue).animate({opacity:1});
    return false;
});

我怎样才能添加或修改它，所以那些 0.1 的不透明度项目你不能点击？

Answer 1

使用指针事件css 属性。

$('ul.filter li a').click(function() {
    var getvalue = $(this).attr('rel');
    $('.portfolioThumbs li.all').animate({opacity:0.1}).css('pointer-events', 'none');
    $('.portfolioThumbs li.'+getvalue).animate({opacity:1}).css('pointer-events', 'auto');;
    return false;
});

注意：pointer-events对于 HTML 元素，仅 Chrome 2.0+、Firefox 3.6+ 和 Safari 4.0+ 支持，IE 和 Opera 不支持。

Answer 2

当你设置不透明度时，也许只是添加一个类

$('.portfolioThumbs li.all').animate({opacity:0.1}).addClass('addedClass');

进而

$('.portfolioThumbs li.addedClass').click(function(e) {
    e.preventDefault();
});

或者你可以简单地阻止点击而不添加额外的类（因为他们有一个）

$('.portfolioThumbs li.all').click(function(e) {
    e.preventDefault();
});

顺便说一句，你为什么要阻止点击 li 项目.. 在这些 li 中是否有一个锚标签你想阻止点击？