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 });
});

根据单独的div隐藏show div不在两个地方工作

1 个答案: