Isotop Filter nach Checkbox Zustand

Question

Wenn einer von euch gute Leute ein Auge darüber werfen könnte und lassen Sie mich wissen, der Fehler meiner Wege, das wäre fab, Prost!

Ich benutze Isotop um Gegenstände zu filtern. Jeder Artikel hat die Option für Benutzer, sie zu "favorisieren".

Ich kann erfolgreich ein Kontrollkästchen umschalten und den aktuellen Status auf localStorage speichern, aber was ich gerne tun könnte ist eine der Filter-Schaltflächen arbeiten, so dass es (über Isotop) alle Elemente gefiltert hat, die wurden ".

Hier sind die Filter-Tasten, die alle gut funktionieren, außer für die "Favoriten".

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> 

Und hier ist das Skript, das ich versuche, Arbeit zu machen.

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 

     }); 

Wenn jemand auf irgendein Licht werfen kann, wo ich falsch werde, würde es enorm geschätzt werden! Vielen Dank im Voraus für jede Hilfe oder Beratung.

UPDATE: Ich habe jetzt eine jsfiddle erstellt. Ich bin neu in jsfiddle; Schreie also, wenn ich es falsch gemacht habe.

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

Aus irgendeinem Grund, den ich nicht die (bisher erfolgreich) scheinen zu bekommen local Zustand des Favoriten Checkbox wechseln richtig in der Geige zu arbeiten. Keine Ahnung, wo ich in die Irre gegangen bin ???

Wie auch immer, wenn jemand irgendwelche Hinweise hat, wie man etwas davon zur Arbeit bringt, wäre das brilliant!

Answer 1

1. Wenn die Seite in jedem Checkbox geladen, die die Klasse .checkbox an der Mutter div als

   $ local hinzufügen ist (dieser) .closest ("Element Punkt") .addClass ("checkbox");

2. Wenn Sie dann auf Favoriten klicken, fügen Sie die Klasse dem übergeordneten Element hinzu, und entfernen Sie die Klasse .checkbox vom übergeordneten Element, wenn sie nicht betroffen ist.

siehe: 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"); 
     } 
    }); 

Versuchen * Edit: *

$('#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

Die Umschaltfunktion speichert nicht, weil data-id für diesen Wähler auf dem falschen Element sitzt die Variable zu füllen:

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

Es wird funktionieren, wenn Sie die Daten-ID aus der <i> zum <div> bewegen sich wie dies:

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

EDIT

OK, ich sehe, wie das funktioniert. Um das Favoriten-Problem zu lösen, sollten Sie meiner Meinung nach die Klasse 'selected' vom div mit der checkbox-Klasse bis zum übergeordneten div verschieben. Dann sollte der Isotope-Filter es automatisch aufheben, da es das Eltern-Div durch seine Klassen filtert. Z.B.

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

Sie müssen die verschiedenen jQuery Selektoren für „.checkbox“ aktualisieren, zu passen, aber dann Filterung durch die Favoriten klicken sollten, ohne dass ‚filter_pinned‘ Code automatisch.

Und Sie müssen .checkbox zu ändern.ausgewählt auf Favoriten

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