javascript - 如何更改 CSS 所有元素在 Javascript 上没有类 `name`？

Question

我写了一个按类别过滤产品。

当我点击一个类别时，它会向元素添加一个类selected，并且该类别的背景已被selected。

我认为问题在于:

if (!$filterLinks.hasClass('selected') )

我想当用户点击另一个

元素时，所有

元素都应该转到背景默认为 white。

我的 HTML 结构:

<ul id="filters">
    <li> <a class="selected" data-filter="*"></a> All <li>
    <li> <a data-filter=".nokia"></a> Nokia <li>
    <li> <a data-filter=".samsung"></a> Samsung <li>
</ul>

还有我的代码:

var $filterLinks = $('#filters a');
$filterLinks.click(function(){
    var $this = $(this);
    $this.parents('li').css("background", "red");
    if ( $this.hasClass('selected') ) {
        return;
    }

    $filterLinks.filter('.selected').removeClass('selected');
    $this.addClass('selected');

    // problem at here, I want when user click another <li> element, 
    // all <li> element should be go to background default is `white`.
    if (!$filterLinks.hasClass('selected') ) {
        $filterLinks.parents('li').css("background", "white");
    }
}

完整代码在这里:https://jsfiddle.net/az2e51c7/

Answer 1

在这里你使用我的代码:

 $("#filters li").click(function()
 {
 $("#filters li").removeClass("selected");
 $(this).addClass("selected");
 });