根据复选框状态的同位素过滤器

Question

如果你们中的任何一位好心人能够注意到这一点并让我知道我的方式的错误，那就太棒了，干杯！

我正在使用同位素来过滤项目。每个项目都有供用户 'favourite' 的选项。

我可以成功切换复选框并将其当前状态保存到 localStorage，但我想做的是让其中一个过滤器按钮起作用，以便它过滤（通过同位素）任何已 'favourited'.

这里是过滤器按钮，除了 'favourites' 之外，其他按钮都可以正常使用。

HTML

<div id="filters" class="button-group">
<button class="button uppercase is-checked" data-filter="*">All</button>
<button class="button uppercase" data-filter=".amber">AMBER</button>
<button class="button uppercase" data-filter=".dark">DARK</button>
<button class="button uppercase" data-filter=".golden">GOLDEN</button>
<button class="button uppercase" data-filter=".ruby">RUBY</button>

<button class="button uppercase" id="checkbox" data-filter=".checkbox">FAVOURITES</button>
</div>

这是我正在尝试制作的脚本。

JS

function customCheckbox(){
        var checkBox = $('.checkbox');

        //on load select if necessary
        checkBox.each(function(){            
            var id=$(this).data('id');
            if(localStorage.getItem(id)==1){
                $(this).addClass("selected");
            }
        });

        //on click toggle selected and save in localstorage
        checkBox.click(function(){
            var id=$(this).data('id');
            $(this).toggleClass("selected");
            if($(this).hasClass("selected")){
                localStorage.setItem(id,1);
            }else{
                localStorage.removeItem(id);
            }
        });
    }


    $(document).ready(function (){
        //start checkboxes here
        customCheckbox();

        //filter button
        var $grid = $('#grid');
        $grid.isotope({
        itemSelector: '.element-item',
        layoutMode: 'fitRows',
        transitionDuration: '0.6s'
    });

    $('#filters').on( 'click', 'button', function() {           
            $('.checkbox:not(.selected)').parent().show(); 
            $grid.isotope(); //show all not starred blocks
        });

    $('#checkbox').on( 'click', 'button', function(){ 

            $('.checkbox:not(.selected)').parent().hide(); 
            $grid.isotope(); //hide all not starred blocks

        });

如果有人能指出我哪里出错了，将不胜感激！非常感谢任何帮助或建议。

更新：我现在创建了一个 jsfiddle。我是 js 新手fiddle;如果我做错了，请大声喊出来。

https://jsfiddle.net/Frannie/rtkpws48/55/

出于某种原因，我似乎无法使收藏夹复选框的（以前成功的）localStorage 切换状态在 fiddle 中正常工作。不知道我哪里误入歧途了？？？

无论如何，如果有人知道如何让它发挥作用，那就太好了！

Answer 1

切换状态未存储，因为 data-id 位于此选择器填充变量的错误元素上：

      var checkBox = $('.checkbox');
      checkBox.each(function() {
        var id = $(this).data('id');

如果您将 data-id 从 <i> 移动到 <div>，它将起作用：

<div class="checkbox" data-id="03"><i style="font-size: 20px;" class="fa fa-heart" aria-hidden="true"></i></div>

编辑

好的，我知道这是怎么回事了。要解决收藏夹问题，我认为您应该做的是将 'selected' class 从带有复选框 class 的 div 移动到 parent ] div。然后同位素过滤器应该自动拾取它，因为它通过 classes 过滤 parent div。例如

<div style="position: absolute; left: 0px; top: 0px;" class="element-item amber selected">
    <h3 class="name">Amber</h3>
    <div class="checkbox" data-id="01"><i style="font-size: 20px;" class="fa fa-heart" aria-hidden="true"></i></div>
  </div>

您需要更新“.checkbox”的各种 jQuery 选择器以适应，但是通过单击“收藏夹”进行过滤应该是自动的，不需要 'filter_pinned' 代码。

并且您需要将收藏夹中的 .checkbox 更改为 .selected

<button class="button" data-filter=".selected">Favourites</button>

Answer 2

当页面加载时，在本地存储的每个复选框中将 class .checkbox 添加到 parent div as

$(this).closest(".element-item").addClass("checkbox");
然后当您点击收藏时，将 class .checkbox 添加到 parent 并且当不喜欢时从中删除 class .checkbox parent.

参见：https://jsfiddle.net/tamilcselvan/rtkpws48/56/

尝试

checkBox.each(function() {
        var id = $(this).data('id');
        if (localStorage.getItem(id) == 1) {
            $(this).addClass("selected");

            // add the class checkbox to the parent div
            $(this).closest(".element-item").addClass("checkbox");
        }
    });

    //on click toggle selected and save in localstorage
    checkBox.click(function() {
        var id = $(this).data('id');
        $(this).toggleClass("selected");
        if ($(this).hasClass("selected")) {
            localStorage.setItem(id, 1);

            // add the class checkbox to the parent div
            $(this).closest(".element-item").addClass("checkbox");
        } else {
            localStorage.removeItem(id);
            // remove the class checkbox in parent div
            $(this).closest(".element-item").removeClass("checkbox");
        }
    });

*编辑：*

$('#filters').on('click', 'button', function() {
    buttonFilter = $(this).attr('data-filter');
    var filterValue = $(this).attr('data-filter');
    console.log(filterValue);
    $grid.isotope();
    // if filter value is all (*) then
    // empty the search field value
    // and manually trigger keyup
    if( filterValue == '*' ) {
        $('#quicksearch').val('');
        $('#quicksearch').trigger('keyup');
        $grid.isotope();
    }

});

根据复选框状态的同位素过滤器

Isotope Filter According To Checkbox State

javascript

jquery

jquery-isotope