网格视图列表视图切换

Grid View List View Toggle

本文关键字：视图 列表 网格      更新时间：2023-09-26

我目前有一个以列表格式列出产品的页面。我希望能够在两种视图之间切换。列表是动态填充的。

下面是一个静态的ul，我想动态填充它：

$('button').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('grid');
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid').addClass('list');
  }
});

<div id="container">
  <div class="buttons">
    <button class="grid">Grid View</button>
    <button class="list">List View</button>
  </div>
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("a.switcher").bind("click", function(e) {
      e.preventDefault();
      var theid = $(this).attr("id");
      var theproducts = $("ul#products");
      var classNames = $(this).attr('class').split(' ');
      if ($(this).hasClass("active")) {
        return false;
      } else {
        if (theid == "gridview") {
          $(this).addClass("active");
          $("#listview").removeClass("active");
          $("#listview").children("img").attr("src", "images/list-view.png");
          var theimg = $(this).children("img");
          theimg.attr("src", "images/grid-view-active.png");
          theproducts.removeClass("list");
          theproducts.addClass("grid");
        } else if (theid == "listview") {
          $(this).addClass("active");
          $("#gridview").removeClass("active");
          $("#gridview").children("img").attr("src", "images/grid-view.png");
          var theimg = $(this).children("img");
          theimg.attr("src", "images/list-view-active.png");
          theproducts.removeClass("grid")
          theproducts.addClass("list");
        }
      }
    });
  });
</script>

<table style="float: right;">
  <tr>
    <td>
      <a href="#" id="gridview" class="switcher">
        <img src="images/grid-view.png" alt="Grid">
      </a>
    </td>
    <td>&nbsp;&nbsp;</td>
    <td>
      <a href="#" id="listview" class="switcher active">
        <img src="images/list-view-active.png" alt="List">
      </a>
    </td>
  </tr>
</table>
相关文章：