Флажок Foreach проверен, чтобы сделать плагин Quicksand JQuery - PullRequest
Новая
       20

Флажок Foreach проверен, чтобы сделать плагин Quicksand JQuery

0 голосов
/ 03 января 2012

На основе учебника http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/ Я пытаюсь реализовать функцию сортировки для моего приложения.

Проблема:

У меня есть элементы, которые я буду сортировать позже с помощью плагина quicksand jquery в следующем формате: 

<ul>
<li class="car">Audi A6</li>
<li class="car">Audi A8</li>
<li class="car">BMW 328Ci</li>
<li class="hobby">Skying</li>
<li class="hobby">Skating</li>
<li class="hobby">Running</li>
<li class="food">Pizza</li>
<li class="food">Salat</li>
<li class="food">Chicken</li>
</ul>

и затем у меня есть 3 флажка для сортировки, что показывать, а что нет: 

    <ul id="filter_sources">
        <li><input type="checkbox" id="source" value="car" />car</li>
        <li><input type="checkbox" id="source" value="hobby" />hobby</li>
        <li><input type="checkbox" id="source" value="food" />food</li>
    </ul>

Я хочу, чтобы для каждого отмеченного флажка запускался плагин quicksand и отображались отмеченные флажки, поэтому если флажки car и hobby установлены, чтобы показать автомобиль и хобби списки

Я спрашиваю это, потому что в уроке они делают это следующим образом: 

$('#filter_sources').live('click',function(e){
        var link = $(this);

        link.addClass('active').siblings().removeClass('active');

        // Using the Quicksand plugin to animate the li items.
        // It uses data('list') defined by our createList function:

        $('#videosList').quicksand(link.data('list').find('li'));
        e.preventDefault();
    });

и я сделал несколько попыток для каждого проверенного ввода, но мне это не удалось.

1 Ответ

3 голосов
/ 03 января 2012

Проверено и, наглядно, работает: 

$('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        console.log(show);
        $('#list li').each(
            function(){
                if ($.inArray($(this).attr('class'),show) > -1) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
    });

JS Fiddle demo .

Обратите внимание, что для простоты и во избежание not() Метод, я решил назначить id для списка, содержащего элементы для фильтрации.

Отредактировано в ответ на комментарий от OP:

[Только] одна проблема: при снятии всех флажков после выбора любого из них все результаты исчезают ...

$('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        if (show.length > 0){
            $('#list li').each(
                function(){
                    if ($.inArray($(this).attr('class'),show) > -1) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                    }
                });
        }
        else {
            $('#list li').show();
        }
    });

JS Fiddle demo .Ссылки:

...