изотопные копии экземпляров на одной странице

Question

Я использую изолятор jquery для фильтрации некоторых данных, и я хочу использовать его в 2-3 местах на одной странице.

Jquery код

var $container = $('.filterable'); 

$container.each(function() { 

    $(this).isotope({ 
     itemSelector: '.item', 
     filter: '*', 
     animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false, 
     } 
    }); 

}); //each 

//FILTER 
$('.filters li a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ 
     filter: selector, 
     animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false, 
     } 
    }); 
    $('[data-toggle="dropdown"]').parent().removeClass('open'); 
    return false; 
}); 

HTML

<div class="row filters"> 
<div class="col-md-6"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors <span class="caret"></span> </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#" data-filter=".blue">Blue</a></li> 
     <li><a href="#" data-filter=".red">Red</a></li> 
     <li class="divider"></li> 
     <li><a href="#" class="selected" data-filter="*">All Fabrics</a></li> 
    </ul> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#" data-filter=".check">Check</a></li> 
     <li><a href="#" data-filter=".plain">Plain</a></li> 
     <li class="divider"></li> 
     <li><a href="#" class="selected" data-filter="*">All Types</a></li> 
    </ul> 
    </div> 
</div> 

<div class="filterable"> 
    <div class="item plain red"><a href="http://localhost.com/uploads/1.jpg" class="preview"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></a></div> 
    <div class="item check red"><a href="http://localhost.com/uploads/2.jpg" class="preview"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></a></div> 
</div> 

Я использую тот же код для различных 3-х секций, где элементы в <div class="filterable"></div> такие же, как первый раздел, его отлично работает для первой секции, но другие 2 секции показывает только 1 элемент, если я не нажму «Все типы» или «Все цвета».

Пожалуйста, помогите мне решить эту проблему. спасибо

Answer 1

Попробуйте добавить класс «фильтры» для вашего ул вместо div.row,

<ul class="filters dropdown-menu" role="menu"> 

так:

<div class="row"> 
<div class="col-md-6"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Colors  <span class="caret"></span> </button> 
<ul class="filters dropdown-menu" role="menu"> 
    <li><a href="#" data-filter=".blue">Blue</a></li> 
    <li><a href="#" data-filter=".red">Red</a></li> 
    <li class="divider"></li> 
    <li><a href="#" class="selected" data-filter="*">All Fabrics</a></li> 
</ul> 
</div> 
</div> 
<div class="col-md-6"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Type <span class="caret"></span> </button> 
<ul class="filters dropdown-menu" role="menu"> 
    <li><a href="#" data-filter=".check">Check</a></li> 
    <li><a href="#" data-filter=".plain">Plain</a></li> 
    <li class="divider"></li> 
    <li><a href="#" class="selected" data-filter="*">All Types</a></li> 
</ul> 
</div> 
</div> 

<div class="filterable"> 
<div class="item plain red"><a href="http://localhost.com/uploads/1.jpg" class="preview"><img class="" src="http://localhost.com/uploads/1.jpg" alt="type" width="75" /></a></div> 
<div class="item check red"><a href="http://localhost.com/uploads/2.jpg" class="preview"><img class="" src="http://localhost.com/uploads/2.jpg" alt="type" width="75" /></a></div> 
</div>