체크 박스 상태에 따른 동위 원소 필터

Question

여러분 중 좋은 사람이 이것에 눈을 찌를 수 있고 내 방식의 오류를 알려주면, 그것은 fab이 될 것입니다, 건배!

나는 항목을 필터링하기 위해 동위 원소를 사용하고 있습니다. 각 항목에는 사용자가 '즐겨 찾기'할 수있는 옵션이 있습니다.

성공적으로 확인란을 전환하고 현재 상태를 localStorage에 저장할 수 있지만 내가 할 수있게하려면 필터 버튼 중 하나를 사용하여 (동위 원소를 통해) 'favourited' '.

다음은 '즐겨 찾기'를 제외한 모든 필터 버튼입니다.

여기

<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> 

그리고 HTML

내가 작품을 만들기 위해 노력하고있어 스크립트입니다.

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/

. 내가 어디로 빠졌는지 모르겠다 ???

어쨌든 누구나 작동하는 방법에 대한 단서가 있다면, 그것은 훌륭합니다!

Answer 1

1. 에 선정) .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 때문에 토글 상태가 저장되지 않습니다 당신이 <div> 등으로 <i>의 데이터-ID를 이동하는 경우

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

그것은 작동을 이 :

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

편집

OK, 나는이 작동하는 방법을 참조하십시오. 즐겨 찾기 문제를 해결하기 위해서는 체크 박스 클래스가있는 div에서 상위 div까지 'selected'클래스를 옮기는 것이 좋습니다. 그런 다음 동위 원소 필터는 클래스를 기준으로 상위 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를 (으)로 변경해야합니다.페이지가로드되면

$ (이) .closest (". 요소 항목"으로 부모 DIV에 클래스 .checkbox를 추가 로컬 스토리지 각 체크 박스에 즐겨 찾기

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