Javascript JQuery:过滤器列表元素

我有一个无序的元素列表，想过滤（切换）所有类为“alt”的元素，但不想过滤第二类为“links”的元素

HTML: 我为你做了一个决定：

这里有6个元素：

• 2有一个叫做“链接”的类
• 另外2个有一个名为“alt”的类
• 还有to元素，它有两个类

我想问的是： 当点击“链接”时，只有“链接1”和“链接2”应该被过滤掉，因为“Alt/Links n”两个类都有。只有当两个开关都激活时，才应过滤掉这两个元素。我还尝试了jQuery提供的[filter（）函数][2]，但无法解决问题。我想我必须检查它是否是唯一的类，如果不是，它将不会被过滤掉，但是如何检查另一个类是否已经被切换

---

有人能给我指一下正确的方向吗？谢谢

如果符合您的需要，请尝试：

这应该起作用：

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}


$("#linkToggle").click(function() { 
    $(".links:not(.alt)").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt:not(.links)").toggle();    
    $(this).toggleClass("muted");
})

---

这应该做你想要的，这将检查一个类和一个类是否只存在

$("#linkToggle").click(function() { 
    $("li[class='links']").toggle();  
    $(this).toggleClass("muted");
});

$("#altToggle").click(function() { 
    $("li[class='alt']").toggle();    
    $(this).toggleClass("muted");
});

---

好的，经过一些测试，我得出了以下解决方案，在其他情况下可能也适用：

HTML

---

我希望你和我一样喜欢这个解决方案

对不起，我的第二个链接断了。哪个班？？？x&y？x=alt，y=links认为应该是清楚的，如果不是：请检查我的JSFIDDLE这对我来说非常适合，谢谢！

$("#linkToggle").click(function() { 
    $(".links").toggle();  //.not('.alt') ???
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").not('.links').toggle();    
    $(this).toggleClass("muted");
})

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}


$("#linkToggle").click(function() { 
    $(".links:not(.alt)").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt:not(.links)").toggle();    
    $(this).toggleClass("muted");
})

$("#linkToggle").click(function() { 
    $("li[class='links']").toggle();  
    $(this).toggleClass("muted");
});

$("#altToggle").click(function() { 
    $("li[class='alt']").toggle();    
    $(this).toggleClass("muted");
});

Toggle: 
<span class="nav-switches">
    <a href="javascript:toggleClass('links');" data-toggle="">Link (<span id="linksCount">0</span>)</a>
    <a href="javascript:toggleClass('alt');" data-toggle="">Text (<span id="altCount">0</span>)</a>
    <a href="javascript:toggleClass('csv');" data-toggle="">CSV (<span id="csvCount">0</span>)</a>
</span>

<ul id="errorList" class="nav nav-list" style="height: 190px; overflow: auto;">
    <li class="alt">Alt 1</li>
    <li class="alt">Alt 2</li>
    <li class="alt links">Alt / Links 1</li>
    <li class="alt links">Alt / Links 2</li>
    <li class="links">Links 1</li>
    <li class="links">Links 2</li>
    <li class="csv">CSV 1</li>
    <li class="csv">CSV 2</li>
    <li class="csv">CSV 3</li>
</ul>

window.toggleClass = function(cssClass) {
    // Wird bereits gefiltert und auf aktivierten Filter geklickt?
    if( $("#"+cssClass+'Count').parent().siblings().hasClass("muted") && !$("#"+cssClass+'Count').parent().hasClass("muted") ) {
        $("ul#errorList li").show();
        $("#"+cssClass+'Count').parent().siblings().removeClass("muted");
    } else {
        $("ul#errorList li").hide();
        $("ul#errorList").find("li."+cssClass).show();

        $("#"+cssClass+'Count').parent().siblings().addClass("muted");
        $("#"+cssClass+'Count').parent().removeClass("muted");
    }
}