javascript - 隐藏显示 div 在基于单独的 div 的两个地方不起作用

Question

我在我的页面中使用两个具有相同脚本的 div。该脚本仅适用于一个 div。我复制了相同的脚本并尝试编辑我的新 div，但第二个 div 影响第一个 div 更改。在我的 main.js 文件中的脚本下方。

//first div

var $container = $('.cat-area .posts').isotope({
  itemSelector : '.itemat',
  isFitWidth: true
});

  $container.isotope({
    columnWidth: '.col-sm-3'
  });

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

  // filter items on button click
$('#filter-tile').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});



 //second div
var $container1 = $('.hi .cat-area .posts').isotope({
  itemSelector : '.itmatmob',
  isFitWidth: true
});

  $container1.isotope({
    columnWidth: '.col-sm-3'
  });

$container1.isotope({ filter: '.htileone1' });

  // filter items on button click
$('#filter-tile-mob').on( 'click', 'button', function() {
  var filterValue1 = $(this).attr('data-filter');
  $container1.isotope({ filter: filterValue1 });
});

my website link

Answer 1

根据上面与@John 的聊天，他希望在多个地方使用过滤器。

**在过滤器中使用类，以便所有过滤器按钮的点击功能都起作用。 **

HTML 示例代码。

<div class="filter-tile-mob">
    <button class="btn btn-primary active1" data-filter=".htiletwo1"><i class="fa fa-crosshairs"></i>Filter 2</button>

    <button class="btn btn-primary active1" data-filter=".htiletwo2"><i class="fa fa-crosshairs"></i>Filter 2</button>

   <button class="btn btn-primary active1" data-filter=".htiletwo3"><i class="fa fa-crosshairs"></i>Filter 3</button>
</div>


<div class="container-fluid no-gutter">
    <div class="posts">
       <div class="itemat htiletwo1 col-xs-12 itmatmob"></div>
      <div class="itemat htileone2 col-xs-12 itmatmob"></div>
      <div class="itemat htileone3 col-xs-12 itmatmob"></div>
    </div>
</div>

JS代码

var $container = $('.container-fluid .posts').isotope({
   itemSelector : '.itemat',
   isFitWidth: true,
   columnWidth: '.col-sm-3'
});
 // filter items on button click
$('.filter-tile-mob').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({ filter: filterValue });
});