每次单击按钮时,我都会尝试再显示 2 个 div。当显示所有 div 时,该按钮应该消失。但按钮并没有消失。
$(".button").click(function() {
$(".content").nextAll(':lt(2)').fadeIn("slow");
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>
这是我的 fiddle :https://jsfiddle.net/9z67k8cd/
最佳答案
改变你的js:
$(".button").click(function() {
$(".content:visible:last").nextAll('.content:lt(2)').fadeIn("slow");
if ($(".content:visible").length === $(".content").length) {
$(this).hide();
}
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content hide">Content 3</div>
<div class="content hide">Content 4</div>
<div class="content hide">Content 5</div>
<div class="content hide">Content 6</div>
<div class="content hide">Content 7</div>
<div class="content hide">Content 8</div>
<div class="content hide">Content 9</div>
<div class="content hide">Content 10</div>
<div class="button">SHOW ME 2 MORE</div>
关于javascript - 单击时淡入元素并隐藏更多按钮(如果为空),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50057577/