我如何輕松檢查很多元素是否具有類（查詢參數/字符串）？

Question

我希望創建一個過濾功能，例如，我們有類別“ a”，“ b”，“ c”，“ d”和“ e”。

我允許用戶使用查詢字符串來訪問頁面。 如http://example.com?cate=a ， http://example.com?cate=b等分類排序按鈕是一組單選按鈕。

這是激活類別排序按鈕的代碼：

function GetURLParameter(sParam) {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split("&");
        for (var i = 0; i < sURLVariables.length; i++) {
            var sParameterName = sURLVariables[i].split("=");
            if (sParameterName[0] == sParam) {
                return sParameterName[1];
            }
        }
    }
    var cate = GetURLParameter("cate");

    switch (cate) {
        case "a":
            $(window).load(function() {
                $("#aBtn").prop("checked", true);
            });
            break;
        case "b":
            $(window).load(function() {
                $("#bBtn").prop("checked", true);
            });
            break;
        case "c":
            $(window).load(function() {
                $("#cBtn").prop("checked", true);
            });
            break;
        case "d":
            $(window).load(function() {
                $("#dBtn").prop("checked", true);
            });
            break;
        case "e":
            $(window).load(function() {
                $("#eBtn").prop("checked", true);
            });
            break;
        default:
            break;
    }

然后，我希望過濾出與類別“ a”，“ b”，“ c”，“ d”和“ e”不匹配的對象。 一些對象屬於多個類別。 對象具有一個通用類，即“ .all ”。 如果激活過濾，則不屬於該類別的對象必須添加類“ .none ”。

這是示例：

<div class="all a e">I have a and e.</div><!-- if query string = a or e, it should show -->
<div class="all b e">I have b and e.</div><!-- if query string = b or e, it should show -->
<div class="all b c e">I have b, c and e.</div><!-- if query string = b, c or e, it should show -->
<div class="all c">I have c.</div><!-- if query string = e, it should show -->
<div class="all d">I have d.</div><!-- if query string = d, it should show -->
<div class="all d">I have d.</div><!-- if query string = d, it should show -->
<div class="all d e">I have d and e.</div><!-- if query string = d or e, it should show -->

還是應該為每個對象添加唯一的ID？

Answer 1

您可以全部hide()它們，然后show()匹配的對象。

$(".all").hide();
$("."+cate).show();

如果你真的想添加類none ：

$(".all").addClass("none");
$("."+cate).removeClass("none");

我在CodePen上做了一個小樣，通過文本輸入“模擬”了cate值。
;）