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

Question

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

我正在使用同位素过滤物品。每个项目都有供用户“收藏”它们的选项。

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

这里是过滤器按钮，除了“收藏夹”之外，它们都可以正常工作。

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。我是 jsfiddle 的新手；如果我做错了，请大声喊叫。

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

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

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

Answer 1

1. 页面加载后，在本地存储的每个复选框中将.checkbox类添加到父div中

   $(this).closest(".element-item").addClass("checkbox");

2. 然后，当您单击收藏时，将类 .checkbox 添加到父级，当不收藏时，从父级中删除类 .checkbox。

见：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();
    }

});

Answer 2

切换状态未存储，因为 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>

编辑

好的，我知道这是如何工作的。要解决收藏夹问题，我认为您应该做的是将“选定”类从具有复选框类的 div 移动到其父 div。然后同位素过滤器应该自动拾取它，因为它按其类过滤父 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>