网格/列表视图产品显示问题

时间：2016-08-17 14:03:17

标签： javascript jquery html css web

list view left/ gridview right

您好。我正在尝试为我的网站制作一个列表视图和网格视图，但我不知道如何使图像的特定项目切换位置...当我按网格视图按钮时，图像显示在网格中，但是徽章和文本与列表模式中的相同。我确定我已将它们全部放在同一个div中......但仍然无效。有什么建议吗？

$('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');
  }
});
.list_view {
  list-style-type: none;
  top: 600px;
  position: absolute;
  left: 244px;
  height: 1100px;
  overflow: auto;
  width: 91%;
}
.list_view li {
  margin-bottom: 100px;
  padding-left: 0;
}
#container ul {
  list-style-type: none;
}
#container .buttons {
  left: 850px;
  position: absolute;
  z-index: 1000;
  top: 550px;
}
#container .list li {
  width: 100%;
}
#container .grid li {
  float: left;
  height: 50px;
  padding-left: 57px;
  padding-bottom: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="buttons">
    <button class="grid">Grid View</button>
    <button class="list">List View</button>
  </div>

  <ul class="list_view">
    <li>
      <div class="item1">
        <img src="images\homepage-960px_26.jpg" alt="Shoe 1" />
        <div class="switch">
          <ul class="main_icons">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item2">
        <img src="images\Item 2.png" alt="Shoe 2" />
        <p class="on_sale">ON SALE!</p>
        <div class="switch" id="switch2">
          <ul class="main_icons" id="main_icons2">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item3">
        <img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
        <div class="switch" id="switch7">
          <ul class="main_icons" id="main_icons7">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item4">
        <img src="images\homepage-960px_33.jpg" alt="Shoe 4" />
        <div class="switch" id="switch3">
          <ul class="main_icons" id="main_icons3">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item5">
        <img src="images\homepage-960px_34.jpg" alt="Shoe 5" />
        <div class="switch" id="switch4">
          <ul class="main_icons" id="main_icons4">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item6">
        <img src="images\shoe_photo3.png" alt="Shoe 6" />
        <p class="on_sale" id="out_stock">OUT OF
          <br/>&nbsp STOCK</p>
        <div class="switch" id="switch8">
          <ul class="main_icons" id="main_icons8">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item7">
        <img src="images\homepage-960px_26.jpg" alt="Shoe 7" />
        <div class="switch" id="switch5">
          <ul class="main_icons" id="main_icons5">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item8">
        <img src="images\Item 2.png" alt="Shoe 8" />
        <p class="on_sale" id="on_sale2">ON SALE!</p>
        <div class="switch" id="switch6">
          <ul class="main_icons" id="main_icons6">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item9">
        <img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
        <div class="switch" id="switch9">
          <ul class="main_icons" id="main_icons9">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
  </ul>
</div>

1 个答案:

答案 0 :(得分：0)

简单...要添加/删除ul的类名应该是list_view / grid_view，如下所示

toAbsolutePath().toString()

 $('#container ul').removeClass('list_view').addClass('grid_view');

$('button').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list_view').addClass('grid_view');
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid_view').addClass('list_view');
  }
});
.list_view {
  list-style-type: none;
  top: 600px;
  position: absolute;
  left: 244px;
  height: 1100px;
  overflow: auto;
  width: 91%;
}
.list_view li {
  margin-bottom: 100px;
  padding-left: 0;
}
#container ul {
  list-style-type: none;
}
#container .buttons {
  left: 850px;
  position: absolute;
  z-index: 1000;
  top: 550px;
}
#container .list li {
  width: 100%;
}
#container .grid li {
  float: left;
  height: 50px;
  padding-left: 57px;
  padding-bottom: 300px;
}

相关问题
最新问题