在查询字符串中编码复选框，然后解码以设置元素可见

Question

我觉得我正在尝试在编码和解码查询字符串方面重新发明轮子。

我正在使用 jQuery。我正在创建一个简单的图片库，其中包含要显示的内容和要隐藏的内容类别的复选框。

因此，我的顶部菜单将允许用户选择他们想查看的内容：

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

我希望查询字符串看起来像这样：

?check1=landscape&check3=still-life

每次用户选中某个框时，页面都会使用新的查询字符串和集合刷新。

// 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();

（你可以看到我在哪里丢失了情节，在“params =”行）

这是我的查询字符串解析器，但它只接受一个参数。我希望它接受任何号码。

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

因此页面加载所有图片

display:none

，然后解析器

display: inline-block

任何具有匹配标签的项目。

因此，如果用户选中了

landscape

和

still-life

，那么任何

hasClass()

landscape

或

still-life

的“文章”都将被

.css('display','inline-block')

编辑。

这是我的图像模板，它是我从

.json

对象构建的。

$("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"
});

我觉得我正在尝试将一个圆钉塞进一个方孔中 - 做比必要的更多的工作来弯曲我必须适应我的新需求的代码。我觉得现有的代码片段可以满足我的需求 - 不是图像部分，而是将复选框编码到查询字符串中，并将查询字符串解码为我可以迭代的可用对象。

Answer 1

这是一个示例：https://codesandbox.io/p/sandbox/confident-dewdney-nkvyh4。

您可以使用 URLSearchParams，而不是自己解析查询参数。

如果您只想将类名用作选择器，我建议不要使用类名。在这种情况下，最好使用

data

属性。

另外，在不刷新页面的情况下隐藏/显示图像不是更好吗？无论如何，您可以调整示例以满足您的需求。