javascript - 切换列表和网格视图

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

问候。