我如何轻松检查很多元素是否具有类（查询参数/字符串）？

Question

I hope to make a filtering function, for example, we have categories "a", "b", "c", "d", and "e".

I allow user come to the page with query string. Such as http://example.com?cate=a , http://example.com?cate=b , etc. Categories sorting buttons are a group of radio button.

Here are the code to active the categories sorting button:

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;
    }

Then, I hope to filter the objects that is or not match the cate "a", "b", "c", "d" and "e". Some objects belong to more than one cates. Objects have a common class, which is " .all ". If filtering active, the objects which is not belongs to the cate must add class " .none ".

Here is the example:

<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 -->

Or should I add a unique id for each object?

Answer 1

You could hide() them all and then show() the matching ones.

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

If you really wish to add the class none :

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

I made a little demo on CodePen where I "simulate" the cate value via a text input.
;)