Home > Blockchain >  Hide button when last div is visible
Hide button when last div is visible

Time：12-20

I'm using slice() to show the next few batch of .cards. By default, 9 cards are visible, and then, when you click on #button, it will show the next 9 (and if you click again, the next 9, etc).

When there are no more cards to show (when all cards a visible), I want to hide the #button, but my approach isn't quite working and I fear I'm doing something really stupid ...

$(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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    <div >

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <a id="button">Load more</a>
          </div>
        </div>
      </div>

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

CodePudding user response：

There's a dot missing in the classname here:

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

Other than that the rest looks like it should function.

CodePudding user response：

Your if condition is reached only before the button is ever clicked, atleast in this example. Move your into the button click handler, that way the check happens everytime user clicks button.

$(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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    <div >

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      
            <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <a id="button">Load more</a>
          </div>
        </div>
      </div>

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

Page link：https//www.codepudding.com/Blockchain/234045.html

Prev:How to add React JSX for every item in state array?
Next:How can I call Discord.js functions from a lib.js file into index.js?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding