当最后一个 div 可见时隐藏按钮
[英]Hide button when last div is visible
问题描述
I'm using slice() to show the next few batch of .cards .
我正在使用slice()来显示接下来的几批.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).默认情况下，9 张卡片是可见的，然后，当您单击#button时，它将显示下一个 9（如果您再次单击，则会显示下一个 9，等等）。
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...当没有更多卡片要显示时（当所有卡片都可见时），我想隐藏#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>
2 个解决方案
解决方案1
0 2021-12-20 00:17:23
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.除此之外，rest 看起来应该是 function。
解决方案2
0 2021-12-20 00:21:26
Your if condition is reached only before the button is ever clicked, atleast in this example.您的 if 条件仅在单击按钮之前达到，至少在此示例中是这样。 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/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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当另一个可见时隐藏一个div - Hide a div when another is visible
要在显示最后一个div时隐藏下一个按钮 - want to hide next button when it displays the last div
在滚动时隐藏 div 但在活动时保持可见 - Hide a div on scroll but keep it visible when active
当另一个可见时如何隐藏div？ - How to hide a div when another is visible?
当最后一种颜色可见时，按钮应该禁用吗？ - button should disable when last color is visible?
删除div后，按钮会停留在最后一个div中 - Button stays in the last div when a div is removed
当cilick不在按钮或div外时隐藏按钮 - Hide a button when cilick outsite of the button or div
滚动时显示Div，然后在不可见时隐藏 - Show Div when scrolled to then hide when its not visible
选中复选框后，显示隐藏按钮并隐藏可见按钮 - When checkbox is checked show hidden button and hide the visible button
当最后一个元素到达时隐藏下一个按钮 - hide next button when last element reaches
相关标签