使用 jQuery 加載更多按鈕

Question

我最近接觸了 javascript 和 jQuery； 我想在我的網站上為圖像網格創建一個加載更多按鈕，網格有 4 列，現在有 16 個帶有懸停疊加效果和標簽的圖像。 我試圖遵循很多教程，但我無法找到並理解我犯的錯誤。

代碼已在以下答案中更正

 $(function() { $(".Box-Hidden").slice(0, 8).show(); $("#loadMoreCont").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); if ($(".Box-Hidden:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); });

 .GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image 1 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="#" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="#"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>

Answer 1

當你使用

$("#loadMoreCont").on(...)

假設您有一個帶有該名稱的id的 html 標簽：

<div id="loadMoreCont">
...
</div>

當你使用

$(".loadMoreCont").on(...)

假設您有一個具有該名稱的類的 html 標簽：

<div class="loadMoreCont">
...
</div>

更新

$(function () {
    $(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images

    $(".loadMoreCont").on('click', function (e) {

        e.preventDefault();
        $(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
        if ($(".Box-Hidden:hidden"). length == 0){
            $("#load").fadeOut ('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
});
});

您的代碼似乎工作正常。 我注釋掉了一些有趣的台詞。 希望這可以幫助。

Answer 2

第 4 行的 #loadMoreCont JS 文件針對的是 ID (#)。 但是在你的 html loadMoreCont 作為一個類 (.)

Answer 3

問題是：“我想在我的網站上為圖像網格創建一個加載更多按鈕，網格有 4 列，現在有 16 個帶有懸停疊加效果和標簽的圖像。我嘗試遵循許多教程，我無法找到並理解我犯的錯誤”

這里是用戶@Kurohige 和@WkL 修改后的更新代碼

HTML

    <div class="GridContent">
      <div class="Portfolio">
        <!-----image 1 ------>
        <div class="Box-Hidden">
          <a href="#" class="SpanProp1">
            <div class="GridItemsCont">

              <img src="#" class="gridimg">
              <div class="infos infocolor1">
                <p>logo</p>
                <button>Learn More</button>
              </div>
            </div>
          </a>
        </div>
        <!-----image 2 ------>
        <div class="Box-Hidden">
          <a href="#" class="SpanProp2 ">
            <div class="GridItemsCont">
              <img src="#">
              <div class="infos infocolor2">
                <p>logo</p>
                <button>Learn More</button>
              </div>
            </div>
          </a>
        </div>

        <!-----total 16 images----->
      </div>
    </div>

<div class="loadMoreCont">
  <a href="#" id="loadMore">Load More</a>
  <a href="#"><img class="loadImg" src="images/arrow.png"></a>
</div>`

CSS

.GridContent {
  width: 100%;
  height: auto;
}

.Portfolio {
  width: 95%;
  height: auto;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 5px;
  padding-top: 4%;
}

.Box-Hidden {
  display: none;
}

查詢

<script>
    $(function () {
    $(".Box-Hidden").slice (0, 8).show();

    $(".loadMoreCont").on('click', function (e) {

        e.preventDefault();

        $(".Box-Hidden:hidden"). slice(0,2).slideDown();
        if ($(".Box-Hidden:hidden"). length == 0){
            $("#load").fadeOut ('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);



});
});
</script>
<script  src="jQuery/jquery-3.4.1.js"></script> 

Answer 4

代碼中的一些問題是類和 ID 在 JS 中混淆了。 特別是loadMore按鈕以及您選擇通過“切片”顯示的項目數量。 為您的容器使用更通用或“語義”友好的名稱而不是Box-Hidden也會有所幫助，因為它並不總是隱藏的，而且它的用途更像是卡片塊，因此將其命名為“卡片”之類的名稱可能是最好的。 下面的示例顯示了“加載更多”按鈕，然后在顯示其余卡片后消失。

 // slice is choosing the first 2 instances of "Box-hidden" and showing them $(".Box-Hidden").slice(0, 2).show(); // if there are Box-Hidden set to display:none (hidden) then show the loadMore button if ($(".Box-Hidden:hidden").length != 0) { $("#loadMore").show(); } $("#loadMore").on('click', function(e) { e.preventDefault(); $(".Box-Hidden:hidden").slice(0, 2).slideDown(); // if there are no more hidden Box-Hidden's then hide the loadMore button if ($(".Box-Hidden:hidden").length == 0) { $("#loadMore").fadeOut('slow'); } // This is not related to the show more, this just brings you back up the page $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); });

 .GridContent { width: 100%; height: auto; } .Portfolio { width: 95%; height: auto; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; padding-top: 4%; } .Box-Hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="GridContent"> <div class="Portfolio"> <!-----image A ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=1"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image B ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=2"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 1 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp1"> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=3" class="gridimg"> <div class="infos infocolor1"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----image 2 ------> <div class="Box-Hidden" style="display: none;"> <a href="#" class="SpanProp2 "> <div class="GridItemsCont"> <img src="http://placekitten.com/200/300?image=4"> <div class="infos infocolor2"> <p>logo</p> <button>Learn More</button> </div> </div> </a> </div> <!-----total 16 images-----> </div> </div> <div class="loadMoreCont"> <a href="#" id="loadMore">Load More</a> <a href="#"><img class="loadImg" src="images/arrow.png"></a> </div>