当最后一个 div 可见时隐藏按钮答案

【问题标题】：Hide button when last div is visible当最后一个 div 可见时隐藏按钮
【发布时间】：2022-01-21 17:48:08
【问题描述】：

我正在使用slice() 显示下一批.cards。默认情况下，9张卡片是可见的，然后，当你点击#button时，它会显示下一个9（如果你再次点击，下一个9，等等）。

当没有更多卡片要显示时（当所有卡片都可见时），我想隐藏#button，但我的方法不太奏效，我担心我在做一些非常愚蠢的事情......

$(function(){

  var x = 9;
  var btn = $("#button");

  $(btn).on('click', function (e) {
    e.preventDefault();
    x = x + 9;
    $('.section__card').slice(0, x).slideDown();
  });

  // hide btn if last card is visible
  if ( $(".section__card").last().is(":visible") ){
    console.log("last");
    $(btn).fadeOut();
  }

});

.section {
  padding: 100px 0;
}

.card{
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.card__image {
  width: 100%;
  height: 467px;
  background-size: cover;
  background-repeat: no-repeat;
}

.section__card:nth-child(2), .section__card:nth-child(3n-1) {
  margin-top: -60px;
}
.section__card:nth-child(n+10) {
  display: none;
}

.section__cta{
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

#button{
  cursor: pointer;
  background-color: lightblue;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="section">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4 section__card section__card--1">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div class="col-12 col-md-4 section__card section__card--2">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--3">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <div class="section__cta">
            <a id="button">Load more</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

您的 if 条件仅在单击按钮之前达到，至少在此示例中是这样。将您移动到按钮单击处理程序中，这样每次用户单击按钮时都会进行检查。

$(function(){

  var showing = 9;
  var btn = $("#button");

  $(btn).on('click', function (e) {
    e.preventDefault();
    showing += 3;
    // hide btn if last card is visible
    if (showing == 12){
      console.log("last");
      $(btn).fadeOut();
    }
  });
  
});

.section {
  padding: 100px 0;
}

.card{
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.card__image {
  width: 100%;
  height: 467px;
  background-size: cover;
  background-repeat: no-repeat;
}

.section__card:nth-child(2), .section__card:nth-child(3n-1) {
  margin-top: -60px;
}
.section__card:nth-child(n+10) {
  display: none;
}

.section__cta{
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

#button{
  cursor: pointer;
  background-color: lightblue;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="section">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4 section__card section__card--1">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div class="col-12 col-md-4 section__card section__card--2">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--3">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <div class="section__cta">
            <a id="button">Load more</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

【讨论】：

感谢以上。测试上述代码后，单击按钮后，它不会加载接下来的几张卡片（最多 9 张）。例如，我的demo有12个. section__card，默认显示9个，但是点击上面demo中的按钮时，隐藏了按钮，但在接下来的几张卡片中没有加载。另外，我可以看到您正在检查第 12 张牌是否显示，但是，如果有超过 12 张牌怎么办？有没有办法让这个动态？在父 div 中的最后一张卡片可见时隐藏按钮？
我无意中漏掉了$('.section__card').slice(0, x).slideDown();，这就是为什么按钮单击没有显示全部 12 个。希望您能猜到这是问题所在。
是的，有很多方法可以让这更加动态。您尝试的方式很有可能。我会继续检查 last 是否可见，直到你让它正常运行。

【解决方案2】：

这里的类名中缺少一个点：

if ( $("section__card").last().is(":visible") ){
if ( $(".section__card").last().is(":visible") ){

除此之外，其余的看起来应该可以正常工作。

【讨论】：

啊，你说得对。我已经在我的演示中纠正了错过的. 并在本地进行了测试。但是，问题仍然存在，我的按钮仍然可见。我的。 console.log() 也没有记录，这让我觉得它没有找到正确的元素（或根本没有找到任何东西）
我明白了，.rows 的嵌套似乎有一点问题，我认为第二个 .row 在第一个关闭之前开始，然后它们都关闭；也许这很无聊 .last() ，很难在此处的 buildin thingy 上说出来。
ahno ，spankied 已经找到了（另一个答案）；他是对的，if 块放错了位置。