如何解决从块视图到表视图的同位素过滤器
我的搜索词没有找到任何内容,所以我希望以前没有人问过这个问题:我正在使用 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 专家,但我很擅长解决问题。非常欢迎解释。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。