scss JS：列表或网格视图

Posted 2021-05-17

var listPosts = $('.list-post-cards');
$('.filters__item--view button').click(function(e) {
  e.preventDefault();
  $('.filters__item--view button').removeClass('js-active');
  $(this).addClass('js-active');
  var selectedView = $(this).data('view');
  if ( $(listPosts).hasClass('list-view') && selectedView == 'list-view' ) {
    return;
  } else if ( $(listPosts).hasClass('grid-view') && selectedView == 'grid-view' ) {
    return;
  } else {
    $(listPosts).removeClass('list-view grid-view');
    $(listPosts).addClass(selectedView);
  }
});

<div class="filters__item--view">
	<button class="btn grid-view i-font-after js-active" data-view="grid-view">Grid View</button>
	<button class="btn list-view i-font-before" data-view="list-view">List View</button>
</div> <!-- .filters__item--view -->

.filters__item--view {
  display: none;
  @include breakpoint( $md ) {
    display: block;
    text-align: center;
    margin-bottom: 120px;
    position: relative;
    &:after {
      content: '';
      background-color: rgba($black, .4);
      display: block;
      position: absolute;
      width: 1px;
      left: 50%;
      top: -10px;
      bottom: -10px;
    }
    button {
      color: #273346;
      display: block;
      letter-spacing: 1px;
      display: inline-block;
      line-height: 1;
      font-weight: 400;
      padding: 10px 0;
      position: relative;
      &:hover {
        color: $black;
      }
      &.js-active {
        color: $red;
        &:hover {
          color: $red;
        }
      }
    }
    .grid-view {
      padding-right: 40px;
      margin-right: 60px;
      &:after {
        content: $i_grid;
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
    .list-view {
      padding-left: 45px;
      &:before {
        content: $i_list;
        font-size: 24px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}