如何使加载更多按钮，显示其他行

Question

我无法获得适合我的页面的代码。

我有6行，每行3列，充满了图像。当我点击"；加载更多"；按钮它什么也不做。我试图将jquery代码.slice(0, 3)更改为(0, 6)等，但什么都没有。我只需要显示2或3行，然后当我点击加载更多按钮时，再显示2或三行

$(document).ready(function() {
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if ($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Grid row -->

<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<!-- Card image -->
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<!-- Card -->
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<!-- Card image -->
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<!-- Card -->
<a href="#" id="loadMore">Load More</a>

</div>
<!-- Grid column -->

Answer 1

你可以用两种方法来做到这一点，

第一个-最初隐藏所有行，然后显示前3个

$(document).ready(function(){
$(".row").hide(); //add this line
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})

第二个-隐藏最后三个第一个

$(document).ready(function(){
$(".row").slice(3, 6).hide();//change this line
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})

Answer 2

我不知道jQuery，但我用标准JavaScript写的，希望它能有所帮助！

document.querySelector('#loadMore').addEventListener('click', (button) =>{
//Set number of rows to show
const numRowsToShow = 2
for (let i = 0; i < numRowsToShow; i++) {

//Get the next row non visible (.d-none)
let rowToShow = document.querySelector('.row.d-none')

//If nothing's found change the text of the link and exit the loop
if(!rowToShow){

button.target.text = 'No Content'
button.classList.add('noContent')
break;                    
} 
//show the row
rowToShow.classList.remove('d-none')
}
})

Answer 3

它有帮助吗？

$(document).ready(function() {
var rows = $(".row").toArray();
$(".row").hide();
$(rows.splice(0, 1)).show();
$(document).on("click", "#loadMore",  function(e) {
e.preventDefault();
if (!rows.length) {
$("#loadMore").text("No Content").addClass("noContent");
} else {
$(this).remove();
$(rows.splice(0, 1)).slideDown();
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<a href="#" id="loadMore">Load More</a>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<a href="#" id="loadMore">Load More</a>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<a href="#" id="loadMore">Load More</a>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<a href="#" id="loadMore">Load More</a>
</div>
</div>