加载所有元素后的新按钮

Question

此处存储了4行。按下LOAD MORE(加载更多(按钮时，将显示每一新行。每一行都显示为它应该显示的，并且代码工作起来没有问题。当到达末尾时，将出现指向另一页的Go按钮。

最好的方法是什么？我已经将代码作为一个示例包含在内。

function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0,7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
function isThisTheEnd() {
let numberLeft = $('#off-items-bucket .item').length;

if(numberLeft == 0) {
$('#load-more').hide();
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});

$('#load-more').click(function() {
loadNextSeven();
isThisTheEnd();
});

.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none; /* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float:left;
box-sizing: border-box;
margin: 20px 0;
width:100%;
}
.item {
width: 100px;
height: 100px;
float:left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width:200px;
margin: 0 auto;
padding:10px;
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>

Answer 1

一种方法是在到达末尾时重命名按钮。然后您可以在$('#load-more').click(function()函数中测试它。

首先，将numberLeft变量移出其函数，以便其他函数可以访问它。当numberLeft === 0时，只需使用$('#load-more').text("GO ->")重命名按钮

let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft === 0) {
$('#load-more').text("GO ->");
}
}

在此函数中，只需测试numberLeft并做出相应反应。

$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});

function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0, 7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft == 0) {
$('#load-more').text("GO ->");
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});

$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});

.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none;
/* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float: left;
box-sizing: border-box;
margin: 20px 0;
width: 100%;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width: 200px;
margin: 0 auto;
padding: 10px;
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>