时间戳

首页 > 解决方案 > 加载所有元素后的新按钮

javascript - 加载所有元素后的新按钮

问题描述

此处存储 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>

标签： javascriptjquery

解决方案

一种方法是在结束时重命名按钮。然后你可以在$('#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>

推荐阅读