Le filtre isotopique ne montre pas/cache des classes spécifiques

Question

J'ai passé de nombreuses heures à essayer de faire fonctionner cela et je n'ai pas de chance.

J'ai suivi la documentation ici: http://isotope.metafizzy.co/filtering.html

Donc, fondamentalement, ce que je veux faire est de montrer tout ce qui a la « boîte » classe et cacher tout le reste. J'ai ajouté cette ligne de code à la JS:

$('.items').isotope({ 
    itemSelector: '.box', 
    filter: '.box' 
}); 

J'ai essayé d'autres lignes de code JS, dont celui-ci:

$container.isotope({ 
    filter: '.box' 
}); 

Aucun d'entre eux ne semble fonctionner.

Voici mon (partiel) HTML:

<div class="metro-layout vertical"> 
    <div class="header"> 
     <h1>My Street Life</h1> 
     <div class="controls"> 
      <span class="down" title="Scroll down"></span> 
      <span class="up" title="Scroll up"></span> 
      <span class="next" title="Scroll left"></span> 
      <span class="prev" title="Scroll right"></span> 
      <span class="toggle-view" title="Toggle layout"></span> 
     </div> 
    </div> 
    <div class="content clearfix"> 
     <div class="items"> 
      <a class="temp" href="#" style="background: #E67E22;"> 
       <span>Music</span> 
       <img height="150px" width="150px" class="icon" src="images/my-music.png" alt="" /> 
      </a> 
      <a class="box" href="#" style="background: #1ABC9C;"> 
       <span>TV &amp; Movies</span> 
       <img height="150px" width="150px" class="icon" src="images/my-movies.png" alt="" /> 
      </a> 

Voici mon (partiel) JS:

$(function() { 

// get elements to increase speed 
$layout = $('.metro-layout'); 
$container = $('.metro-layout .content'); 
$('.items').isotope({ 
    itemSelector: '.box', 
    filter: '.box' 
}); 


// this method should be called when you want to switch the layout style - horizontal or vertical 
function changeLayoutMode(isHorizontal) { 
    $('.items',$layout).removeAttr('style'); // clean style 
    if (isHorizontal) { 
     $('.items',$layout).css({ 
      width: $('.items',$layout).outerWidth() // make sure we get the whole width of the items container 
     }).isotope({ 
      itemSelector : '.box', 
      layoutMode: 'masonryHorizontal', 
      animationEngine : 'css' 
     }); 
    } else { 
     $('.items',$layout).css({ width: 'auto' }).isotope({ 
      itemSelector : '.box', 
      layoutMode: 'masonry', 
      animationEngine : 'css' 
     }); 
    } 
} 
changeLayoutMode($layout.hasClass('horizontal')); // init initial state based on the class in the markup 

Je ne pense pas que vous aurez besoin du code complet, mais si vous vous sentez faites-le moi s'il vous plaît.

Aussi, si vous avez besoin de plus d'infos de ma part ou si ma question n'est pas claire, faites-le moi savoir. Cela étant dit, quelqu'un peut-il m'aider à résoudre ce problème?

Voici le lien vers jsFiddle: http://jsfiddle.net/mikev10/r229k3j0/2/ avis à l'extrême droite de la case « Music » est toujours là, même si elle a une classe de « temp »

Answer 1

La raison pour laquelle il ne filtre pas parce que l'isotope ne filtre les objets dont il a le contrôle. Le itemSelector est .box et le filter est .box. Il ne supprimera pas l'élément .temp car il n'est pas chargé dans l'isotope. Voici un exemple de travail.

http://jsfiddle.net/r229k3j0/6/

Vous remarquerez que le itemSelector est maintenant .item et j'ajouté que la classe à tous les éléments à l'intérieur de .items. Apparaît à se comporter comme vous l'avez prévu.