Question

我使用jQuery创建了一个简单的切换列表/网格视图。我的问题是如何使这个代码，即jQuery更有效（更好的编码）？这是基于我项目中的代码的一些虚拟代码：

HTML：

<div class="toggle-view">
    <span class="list l-active">List view</span>
    <span class="grid">Grid view</span>
</div>

<ul id="listing-view">
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
    <li>Listing Block</li>
</ul>

CSS：

.toggle-view span {
  color:#00804e;
  cursor:pointer;
}
.toggle-view .l-active {
  color:#c4c3c1;
  cursor:auto;
}
.list-view li {
    width:100%
}
.grid-view li {
    float:left;
    width:50%;
}

jQuery的：

$('.toggle-view span').on('click', function() {
    if($(this).hasClass('grid')) {
      $('#listing-view').addClass('grid-view');
      $('.toggle-view span').addClass('l-active');
      $('.toggle-view span.list').removeClass('l-active');
    }
      else if($(this).hasClass('list')) {
        $('#listing-view').removeClass('grid-view');
        $('.toggle-view span').addClass('l-active');
      $('.toggle-view span.grid').removeClass('l-active');
      }
  });

Answer 1

看到这个......

$('.toggle-view span').on('click', function() {
if($(this).hasClass('grid')) {
  $('#listing-view').addClass('grid-view');
  $('.toggle-view .list').removeClass('l-active');
}else {
  $('#listing-view').removeClass('grid-view');
  $('.toggle-view .grid').removeClass('l-active');
  }
  $(this).addClass('l-active');
});

问候。

切换列表和网格视图

1 个答案: