Закодируйте флажки в строке запроса, а затем декодируйте, чтобы сделать элементы видимыми. ⇐ Jquery

[Anonymous]

Мне кажется, что я пытаюсь изобрести велосипед с точки зрения кодирования и декодирования строки запроса.
Я использую jQuery. Я создаю простую галерею изображений с флажками для категорий того, что показывать, а что скрывать.
Итак, мое верхнее меню позволит пользователю выбирать, что он хочет видеть:
Итак, мое верхнее меню позволит пользователю выбирать, что он хочет видеть:
п>

Код: Выделить всё

All
Landscape
Landscape
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, а затем анализатор отображает: inline-block все элементы, имеющие соответствующий тег.
Итак, если пользователь проверил пейзаж и натюрморт, то любые «статьи», имеющиеClass() пейзаж или натюрморт< /код> будет .css('display','inline-block')ed.
Вот мой шаблон изображения, который я создаю на основе объекта .json .

Код: Выделить всё

$("body").append (
"" +
"" +
"
[img]img/[/img]
" +
"" +
"
" +
"" + v.img + "
" + v.store + "" + "" +
"" + v.text + "" +
"
" +
"\n"
});

У меня такое ощущение, будто я пытаюсь засунуть круглый колышек в квадратное отверстие — делаю больше работы, чем необходимо, чтобы подогнать код под свои новые нужды. Я чувствую, что существуют фрагменты кода, которые делают именно то, что я хочу - не часть изображения, а кодирование флажков в строку запроса и декодирование строки запроса в полезный объект, который я могу перебирать.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ts-visible