jQuery的 - 突出的div同一類

Question

我使用jQuery寫了一個程序，我想，如果他們的屬性相匹配的按鈕，突出的div ...

$links = $('.property'); 
$links.click(function(e) { 
    //Get our variables, simply $(this) and the colour 
    var $this = $(this), 
     color = $this.data('col'); 

    //Toggle the active class on this link 
    $this.toggleClass('active'); 

    //Remove .main on all .test's 
    $(".slayout").removeClass("main"); 
    $(".product").addClass("trans"); 
    $(".product").removeClass("main"); 

    //Map the active link's data-col with a dot attributes to an array 
    //Join it up to make a selector 
    var selector = $links.filter('.active').map(function(){ 
     return "."+$(this).data('col'); 
    }).get().join(''); 

    //Add the class back on to matches 
    $(selector).addClass('main'); 

    //Finally, prevent the default action 
    e.preventDefault(); 
}); 

http://jsfiddle.net/os40xLof/

出於某種原因，它是不工作我想要的。如果我點擊「熱門」，那麼我預計其中的「熱門」兩項將突出顯示，其餘將變暗。

但由於某種原因，一切都開始變暗，我在哪裏出錯了！

Answer 1

你的CSS是錯誤的，增加更多的特異性.slayout規則：

.main { opacity:1; } 
.main.slayout { opacity:0.3; }