My goal is to create a filtering feature where users can choose from categories "a", "b", "c", "d", and "e". Users can come to the page with a specific query string like http://example.com?cate=a, http://example.com?cate=b, etc. The categories sorting buttons are presented as a group of radio buttons.
Below is the code snippet to activate the category sorting buttons:
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;
}
Next, I want to filter objects that match or do not match the selected categories "a", "b", "c", "d", and "e". Some objects may belong to more than one category. All objects have a common class called ".all". When filtering is active, objects that do not belong to the selected category must be assigned the class ".none".
Here is an example:
<div class="all a e">I have properties of both a and e.</div><!-- should display if query string includes a or e -->
<div class="all b e">I possess characteristics of both b and e.</div><!-- should display if query string includes b or e -->
<div class="all b c e">I contain attributes of b, c, and e.</div><!-- should display if query string includes b, c, or e -->
<div class="all c">I represent c alone.</div><!-- should display if query string includes c -->
<div class="all d">I signify d only.</div><!-- should display if query string includes d -->
<div class="all d">I also denote d.</div><!-- should display if query string includes d -->
<div class="all d e">I exhibit qualities of both d and e.</div><!-- should display if query string includes d or e -->
Should I consider adding a unique id for each object?