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

加载页面时，在localstorage的每个复选框中，将类.checkbox添加到父div中

$（本）.closest（＆＃34; .element项＆＃34）。addClass（＆＃34;复选框＆＃34）;
然后，当您点击收藏夹时，将班级.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');

如果您将数据ID从<i>移动到<div>，这样就可以了：

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

修改

好的，我知道这是如何运作的。要解决收藏夹问题，我认为你应该做的是移动所选择的＆＃39; class，从带有checkbox类的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>

您需要更新＆＃34; .checkbox＆＃34;的各种jQuery选择器。适合，但是通过点击收藏夹进行过滤应该是自动的，而不需要“过滤_固定”＃39;代码。

您需要将.checkbox更改为。收藏夹

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

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

2 个答案: