Question

在网站上，我可以在两种不同的商品视图之间切换，一个包含3列（拇指）的视图和一个列表视图，每行包含1个项目（列表）。这是执行此操作的html和脚本

<ul class="filter-view">
<li>
<a href="#" id="thumb" class="thumb filter active" data-action="thumb"><i class="fa fa-th"></i></a>
</li>
<li>
<a href="#" id="list" class="list filter" data-action="list"><i class="fa fa-th-list"></i></a>
</li>
</ul>

 var list = document.querySelector('.list-section');
if (list){
    jQuery('.filter-view .filter').on('click',function(e){
        var _this = jQuery(this);
        var parent = _this.parents('.inner');
        var listContent = parent.find('.list-content');
        listContent
            .removeClass('thumb')
            .removeClass('list')
            .addClass(_this.data('action'));
        _this
            .addClass('active')
            .parent()
            .siblings()
            .find('.filter')
            .removeClass('active');
        e.preventDefault();
    });
}
};

我添加了一个javascript脚本，通过添加一个名为“js-equal-height”的类来实现与拇指视图相等的高度列到商品div。一切都很好，但我没有想让这个班级在商店物品的列表视图上工作。

我添加了你。用于从列表视图中删除“js-equal-height”的脚本。该类将从列表视图中删除，但如果我切换回拇指视图“js-equal-height”无效。

$(document).ready(function(){
if ( $('li.list.filter').hasClass('active') ) {
$('#level1').removeClass('js-equal-height');
} else {
  if ( $('li.thumb.filter').hasClass('active') ) {
 $('#level1').addClass('js-equal-height'); 
 }
 }
 });

我希望你能帮助我。

由于弗兰克

添加/删除列表视图切换的类

0 个答案: