jquery - Encode checkboxes in query string then decode to set elements visible - Stack Overflow

admin管理员组

文章数量:1122846

I feel like I'm trying to reinvent the wheel here in terms of encoding and decoding the query string.

I am using jQuery. I am creating a simple picture gallery with checkboxes for categories of what to show and what to hide.

So, my top menu will allow the user to choose what they want to see:

<input type="checkbox" name="all" value="all">All
<input type="checkbox" name="landscape" value="landscape">Landscape
<input type="checkbox" name="figure-drawing" value="landscape">Landscape
<input type="checkbox" name="still-life" value="still-life">Still Life
...

I expect the query string will look something like this:

?check1=landscape&check3=still-life

Each time the user checks a box, the page will refresh with a new query string and the collection.

// set up handler for checkboxes
$( document ).ready(function() {
    $( "input[type=checkbox]" ).on( "click", countChecked );
});

var countChecked = function() {
  var listt = $( "input:checked" );
    params = $.param(listt); // this is not right
    console.log(listt);
};
countChecked();

(You can see where I lost the plot, there on the 'params =' line)

This was the query string parser I had, but it only accepts a single parameter. I'd like it to accept any number.

function processFilter() {
    // process query string
    var qs = function() {
        var s = window.location.search.substr(1),   
        p = s.split(/\&/), l = p.length, kv, r = {};

        if (l === 0) { return false; }

        while (l--) {
            kv = p[l].split(/\=/);
            r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
        }

        return r;
    }();

    var allPics = $('article')
    var typeFilter =    qs.filter || null;

    // check the query string filter
    if (typeFilter !== null) {
        // it is not null, process it
        $.each(allPics, function(i,v) {
            if ($(v).hasClass(typeFilter)) {
                $(v).css('display','inline-block');
            }
        });
    } 
    else {
        // it is null, treat as all
        $.each(allPics, function(i,v){
            $(v).css('display','inline-block');
        });
    }
}

So the page loads with all pics display:none and then the parser display: inline-block any items that have a matching tag.

So, if the user checked landscape and still-life, then any 'articles' that hasClass() landscape or still-life will be .css('display','inline-block')ed.

Here is my image template, which I'm building from a .json object.

$("body").append (
"<article style='display:none;' class='"+v.tags+"'>" + 
                "<div class='wrapper'>" +
                    "<img src='img/" + v.folder + "/IMG_" + v.img + ".jpg' height='225' width='300'/>" +
                "</div>" +
                "<p>" +
                    "<span class='imgno'>" + v.img + "<br><span class='smaller'>" + v.store + "</span>" + "</span>" +
                    "<span class='descrip'>" + v.text + "</span>" +
                "</p>" +
            "</article>\n"
});

I feel like I'm trying to stuff a round peg in a square hole here - doing more work than necessary to bend the code I have to suit my new needs. I feel like there are existing code snippets that do just what I want - not the image part, but the encoding of checkboxes into the query string and the decoding of querystring into a usable object I can iterate through.

I feel like I'm trying to reinvent the wheel here in terms of encoding and decoding the query string.

I am using jQuery. I am creating a simple picture gallery with checkboxes for categories of what to show and what to hide.

So, my top menu will allow the user to choose what they want to see:

<input type="checkbox" name="all" value="all">All
<input type="checkbox" name="landscape" value="landscape">Landscape
<input type="checkbox" name="figure-drawing" value="landscape">Landscape
<input type="checkbox" name="still-life" value="still-life">Still Life
...

I expect the query string will look something like this:

?check1=landscape&check3=still-life

Each time the user checks a box, the page will refresh with a new query string and the collection.

// set up handler for checkboxes
$( document ).ready(function() {
    $( "input[type=checkbox]" ).on( "click", countChecked );
});

var countChecked = function() {
  var listt = $( "input:checked" );
    params = $.param(listt); // this is not right
    console.log(listt);
};
countChecked();

(You can see where I lost the plot, there on the 'params =' line)

This was the query string parser I had, but it only accepts a single parameter. I'd like it to accept any number.

function processFilter() {
    // process query string
    var qs = function() {
        var s = window.location.search.substr(1),   
        p = s.split(/\&/), l = p.length, kv, r = {};

        if (l === 0) { return false; }

        while (l--) {
            kv = p[l].split(/\=/);
            r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
        }

        return r;
    }();

    var allPics = $('article')
    var typeFilter =    qs.filter || null;

    // check the query string filter
    if (typeFilter !== null) {
        // it is not null, process it
        $.each(allPics, function(i,v) {
            if ($(v).hasClass(typeFilter)) {
                $(v).css('display','inline-block');
            }
        });
    } 
    else {
        // it is null, treat as all
        $.each(allPics, function(i,v){
            $(v).css('display','inline-block');
        });
    }
}

So the page loads with all pics display:none and then the parser display: inline-block any items that have a matching tag.

So, if the user checked landscape and still-life, then any 'articles' that hasClass() landscape or still-life will be .css('display','inline-block')ed.

Here is my image template, which I'm building from a .json object.

$("body").append (
"<article style='display:none;' class='"+v.tags+"'>" + 
                "<div class='wrapper'>" +
                    "<img src='img/" + v.folder + "/IMG_" + v.img + ".jpg' height='225' width='300'/>" +
                "</div>" +
                "<p>" +
                    "<span class='imgno'>" + v.img + "<br><span class='smaller'>" + v.store + "</span>" + "</span>" +
                    "<span class='descrip'>" + v.text + "</span>" +
                "</p>" +
            "</article>\n"
});

I feel like I'm trying to stuff a round peg in a square hole here - doing more work than necessary to bend the code I have to suit my new needs. I feel like there are existing code snippets that do just what I want - not the image part, but the encoding of checkboxes into the query string and the decoding of querystring into a usable object I can iterate through.

• jquery
• query-string

Share Improve this question Follow edited Nov 21, 2024 at 19:08 marc_s 754k183183 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Nov 21, 2024 at 18:01 DaveC426913DaveC426913 2,04666 gold badges3737 silver badges6363 bronze badges 1

• while checking/unchecking the check boxes page got realod each time? or only data got filter out which is already present? or you send filter value to server and get some html response and append it to the page using jQuery? – Death-is-the-real-truth Commented Nov 22, 2024 at 7:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Here is an example: https://codesandbox.io/p/sandbox/confident-dewdney-nkvyh4.

Instead of parsing query parameters by yourself, you can use URLSearchParams.

I would recommend not using class names if you only want to use them as selectors. Using data attributes is preferable in this case.

Also, wouldn't it be better to hide/show images without refreshing the page? Anyway, you can adapt the example to suit your needs.

本文标签： jqueryEncode checkboxes in query string then decode to set elements visibleStack Overflow