1

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

1 に答える 1

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

ご挨拶。

于 2013-01-16T13:12:31.967 に答える