jquery - 从块视图到表视图的同位素过滤器

Question

我没有用我的搜索词找到任何东西，所以我希望以前没有人问过这个问题：我正在使用 Isotope 插件来过滤一堆项目。到目前为止，一切都很好。这些项目通常都在一个块中，就像一个投资组合。然而，客户端也想要一个过滤器选项，它从块布局到单独的列表布局，就像在垂直布局模式中一样。但这实际上意味着可能需要一个完整的单独 div 来替换块布局模式，因此垂直布局也可以排序。单击相应按钮时，我尝试使用以下 jQuery 替换 div，但它不起作用。

<div class="row main-area">
  <div class="btn-group sort-by-button-group">
     <button class="btn btn-outline-primary active" data-sort-value="original-order">by state</button>
     <button class="btn btn-outline-primary" data-sort-value="name">by name</button>
     <button class="btn btn-outline-primary" data-sort-value="size">by size</button>
     <button class="btn btn-outline-primary" id="listClick">list view</button>
  </div>

  all the grid items here
</div>

<div id="static" class="row" style="display: none;">
  My Static Content
</div>

<div id="list-view" class="row" style="display: none;">
  This is where the new vertical layout and filtering buttons would appear
</div>

<script>
  $( document ).ready(function() {
     $('#listClick').on('click',function(){
        if($('.main-area').css('display')!='none'){
           $('.list-view').html($('#static').html()).show().siblings('.main-area').hide();
        }else if($('.list-view').css('display')!='none'){
           $('.main-area').show().siblings('.list-view').hide();
        }
     });
  });
</script>

我假设同位素脚本有一些东西会干扰尝试将该按钮绑定到其他东西。有任何想法吗？无论如何，我都不是 jQuery 专家，但我很擅长解决问题。非常欢迎解释。

标签： jqueryjquery-isotope