Question

我有3行4个图像，每个图像都有自己的div。我希望在页面加载时显示前2行，但是在点击“加载更多”时会显示第3行。按钮。一行div设置如下：

<div class="w3-content w3-container w3-padding-64">

//First row of images
  <div class="w3-row-padding w3-center portfolioImgs">
    <div class="w3-col m3">
      <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"">
    </div>

    <div class="w3-col m3">
      <img src="images/projects/sugarland.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="images/projects/stevenson.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="images/projects/phoenix.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
  </div>
  .
  .
  .
  //Second row of images
  <div class="w3-row-padding w3-center portfolioImgs">
  .
  .
  .
</div>

//load more button
<a href="#" id="loadmore" class="w3-row w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</a>

我已经尝试了很多jQuery方法来加载第三行div，但想知道它是否因为我试图直接加载div而不是imgs？

Answer 1

您可以使用伪选择器nth-child并指定3作为参数：

$("#loadmore").click(function(){
  $(".w3-row-padding:nth-child(3)").show();
});

这假设前两行开始可见，第三行开始隐藏，您可以在CSS中执行。

Answer 2

简单，首先将类hidden添加到要隐藏的元素。

然后将click事件添加到按钮，单击，找到类hidden的所有元素并切换它。（第一次点击显示，第二次点击隐藏）

＆＃13;

$('#loadmore').on('click', function() {
  console.log();
  $('.hidden').toggle();
})

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>


<div class="w3-content w3-container w3-padding-64">

  <div class="w3-row-padding w3-center portfolioImgs">
    <div class="w3-col m3">
      <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
    <div class="w3-col m3">
      <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>
  </div>
  <div class="w3-row-padding w3-center portfolioImgs">
    <div class="w3-col m3">
      <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
    <div class="w3-col m3">
      <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>
  </div>

  <div class="w3-row-padding w3-center portfolioImgs hidden">
    <div class="w3-col m3">
      <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
    <div class="w3-col m3">
      <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>

    <div class="w3-col m3 ">
      <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity ">
    </div>
  </div>

  <a href="#" id="loadmore" class="w3-row w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</a>

＆＃13;

使用jQuery加载更多按钮

2 个答案: