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

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. 选择当网页加载，在这的localStorage类.checkbox添加到父DIV作为

   $（本）.closest（“元素项目”每个复选框）.addClass（ “复选框”）;

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'); 

它会工作，如果你移动从<i>数据-ID的<div>像这样的：

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

编辑

OK，我看到这是如何工作的。为了解决收藏夹问题，我认为你应该做的就是将'selected'类从具有复选框类的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更改为。在收藏

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