jquery - Jquery 加载更多并隐藏按钮
问题描述
我的项目网站上有很多文章缩略图。我正在尝试让 jquery 为文章缩略图显示更多按钮，并且在加载所有内容后，我需要使用相同或另一个按钮隐藏除前三个之外的所有文章，就像加载网站时一样。
到目前为止，我的代码看起来像这样，我不知道下一步该做什么。谢谢你的帮助。
jQuery(document).ready(function($) {
$(function() {
$(".more-box").slice(0, 3).show();
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".more-box:hidden").slice(0, 3).fadeIn();
if ($(".more-box:hidden").length == 0) {
// ON CLICK HIDE ALL ARTICLES EXCEPT FIRST THREE
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="articles">
<div class="wrapper more-content">
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=26">
<div class="image-wrapp"><img src="uploads/thumbs/c4slrsw6a680840g40.jpeg" alt="ov-a: Pedantný proces navrhovania v kombinácii s dialógom s klientom" />
</div>
<p class="article-title">ov-a: Pedantný proces navrhovania v kombinácii s dialógom s klientom</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=24">
<div class="image-wrapp"><img src="uploads/thumbs/71c2l0vfphwc40c40s.jpeg" alt="SINGULARCH: ov–a (Praha, CZ)" />
</div>
<p class="article-title">SINGULARCH: ov–a (Praha, CZ)</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=25">
<div class="image-wrapp"><img src="uploads/thumbs/2lsz30tp86skc4ckgo.jpeg" alt="Kuklica Smerek Architekti + Hubinský" />
</div>
<p class="article-title">Kuklica Smerek Architekti + Hubinský</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=27">
<div class="image-wrapp"><img src="uploads/thumbs/1eviid0eh5hc0w80gk.jpeg" alt="KILO / HONČ" />
</div>
<p class="article-title">KILO / HONČ</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=29">
<div class="image-wrapp"><img src="uploads/thumbs/vd2uv050nusgo8gs0.jpeg" alt="Langarita–Navarro: Temperamentný zmysel pre detail" />
</div>
<p class="article-title">Langarita–Navarro: Temperamentný zmysel pre detail</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=30">
<div class="image-wrapp"><img src="uploads/thumbs/8ifuadcp36gws4440.jpg" alt="SINGULARCH: Langarita–Navarro (Madrid, ESP)" />
</div>
<p class="article-title">SINGULARCH: Langarita–Navarro (Madrid, ESP)</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=31">
<div class="image-wrapp"><img src="uploads/thumbs/1ejmfi868dq88gwok.jpg" alt="KOSMOS: Európska profesionalita a ruský drive" />
</div>
<p class="article-title">KOSMOS: Európska profesionalita a ruský drive</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=32">
<div class="image-wrapp"><img src="uploads/thumbs/26q2osyy6growccwwo.jpg" alt="SINGULARCH: KOSMOS (Moskva, RUS)" />
</div>
<p class="article-title">SINGULARCH: KOSMOS (Moskva, RUS)</p>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</section>解决方案
我只添加了一个#loadMore按钮，但奇怪的是缺少......还有一个 js 行来隐藏所有.more-box从头开始。
然后，对于没有更多隐藏元素时的“重置”，if条件错位了。你必须先测试这个条件。
jQuery(document).ready(function($) {
$(function() {
// Hide them all
$(".more-box").hide()
$(".more-box").slice(0, 3).show();
$("#loadMore").on('click', function(e) {
e.preventDefault();
// If there is no hidden elements
if($(".more-box:hidden").length ===0){
$(".more-box").hide()
$(".more-box").slice(0, 3).show();
}
// If there is at least one hidden element
else{
$(".more-box:hidden").slice(0, 3).fadeIn();
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="articles">
<div class="wrapper more-content">
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=26">
<div class="image-wrapp"><img src="uploads/thumbs/c4slrsw6a680840g40.jpeg" alt="ov-a: Pedantný proces navrhovania v kombinácii s dialógom s klientom" />
</div>
<p class="article-title">ov-a: Pedantný proces navrhovania v kombinácii s dialógom s klientom</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=24">
<div class="image-wrapp"><img src="uploads/thumbs/71c2l0vfphwc40c40s.jpeg" alt="SINGULARCH: ov–a (Praha, CZ)" />
</div>
<p class="article-title">SINGULARCH: ov–a (Praha, CZ)</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=25">
<div class="image-wrapp"><img src="uploads/thumbs/2lsz30tp86skc4ckgo.jpeg" alt="Kuklica Smerek Architekti + Hubinský" />
</div>
<p class="article-title">Kuklica Smerek Architekti + Hubinský</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=27">
<div class="image-wrapp"><img src="uploads/thumbs/1eviid0eh5hc0w80gk.jpeg" alt="KILO / HONČ" />
</div>
<p class="article-title">KILO / HONČ</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=29">
<div class="image-wrapp"><img src="uploads/thumbs/vd2uv050nusgo8gs0.jpeg" alt="Langarita–Navarro: Temperamentný zmysel pre detail" />
</div>
<p class="article-title">Langarita–Navarro: Temperamentný zmysel pre detail</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=30">
<div class="image-wrapp"><img src="uploads/thumbs/8ifuadcp36gws4440.jpg" alt="SINGULARCH: Langarita–Navarro (Madrid, ESP)" />
</div>
<p class="article-title">SINGULARCH: Langarita–Navarro (Madrid, ESP)</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=31">
<div class="image-wrapp"><img src="uploads/thumbs/1ejmfi868dq88gwok.jpg" alt="KOSMOS: Európska profesionalita a ruský drive" />
</div>
<p class="article-title">KOSMOS: Európska profesionalita a ruský drive</p>
</a>
</div>
</div>
<div class="more-box">
<div class="margin-column equal_col">
<a href="clanok.php?uid=32">
<div class="image-wrapp"><img src="uploads/thumbs/26q2osyy6growccwwo.jpg" alt="SINGULARCH: KOSMOS (Moskva, RUS)" />
</div>
<p class="article-title">SINGULARCH: KOSMOS (Moskva, RUS)</p>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</section>
<!-- Added a button-->
<button id="loadMore">Load More</button>推荐阅读
- java - thymleaf 如何将变量从表单提交到控制器以附加到 Url
- react-native - 在 Seachbar 中以方形显示的图标反应原生纸
- java - 如何在 JUnit 5 中测试队列？
- windows - 在 Windows 中，NT Authority/System 能否以另一个用户身份运行 powershell 脚本
- python - 如何在pyside中使用Material Style？
- windows - winAPI ScrollWindow 会影响 GetClientRect() 吗？
- github - 有没有办法在 github README.org (org-mode) 中显示可折叠的内容？
- apache2 - 在 Apache 中计算 mpm_event.conf 值的最佳实践是什么？
- spring-integration - Spring Integration DSL 将一个对象转换为另一个
- javascript - javascript自动验证在php文件中不起作用