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>

我对<div class="filterable"></div>中的项目与第一部分相同的不同3个部分使用相同的代码，它完全适用于第一部分，但其他2部分仅显示1个项目，除非我单击所有类型或所有颜色。< / p>

请帮我解决这个问题。谢谢

Answer 1

尝试将类“过滤器”添加到ul而不是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>

同一页面上的同位素多个实例

1 个答案: