如何在不使用 jquery 的情況下單擊按鈕時加載更多或顯示更少的 div/cards

Question

我在 jquery 中有一個針對此要求的工作代碼，當我單擊“顯示更多”和“顯示更少”按鈕時，它會顯示指定數量的卡片/div 並加載更多或加載更少的行。

我需要使用核心 javascript，但我無法在核心 javascript 中實現它。

這是我完整工作的帶有演示的 jquery 代碼：

 var rowslength = 5; size_timelinediv = $("#timeline t").length; console.log(size_timelinediv)//prints 11 var x = 3; //number of cards to be displayed if (rowslength < 4) { $("#loadMoreprodDiv").hide(); } if (x == 3) { //alert(rowslength) $("#showlessprodDiv").hide(); } $("#timeline t:lt(" + x + ")").show(); $("#loadMoreprodDiv").click(function () { x = (x + 5 <= size_timelinediv) ? x + 5 : size_timelinediv; $("#timeline t:lt(" + x + ")").show(); $("#showlessprodDiv").show(); if (x == size_timelinediv) { $("#loadMoreprodDiv").hide(); } }); $("#showlessprodDiv").click(function () { x = (x - 5 <= 3) ? 3 : x - 5; $("#timeline t").not(":lt(" + x + ")").hide(); $("#loadMoreprodDiv").show(); $("#showlessprodDiv").show(); if (x == 3) { $("#showlessprodDiv").hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="timeline" id="timeline" > <t style="display:none"><div>Hi</div></t> <t style="display:none"><div>Hello</div></t> <t style="display:none"><div>How</div></t> <t style="display:none"><div>Are</div></t> <t style="display:none"><div>You</div></t> <t style="display:none"><div>I'm</div></t> <t style="display:none"><div>really</div></t> <t style="display:none"><div>Good</div></t> <t style="display:none"><div>x</div></t> <t style="display:none"><div>y</div></t> <t style="display:none"><div>z</div></t> </div> <button id="loadMoreprodDiv" class='loadMore'>View More Details</button><button id="showlessprodDiv" class='showLess'>View Less Details</button>

現在根據要求，我需要將此 jquery 代碼轉換為核心 javascript ：

這是我試過的：

size_timelinediv = document.getElementById("timeline").querySelectorAll("t").length;
console.log(size_timelinediv)//prints 11
var x = 3;//number of cards to be displayed

document.getElementById("timeline").querySelectorAll("t:lt(" + x + ")").style.display = "block"; //this doesn't work

但這不起作用。 它給出了以下錯誤：

"Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': 't:lt(3)' is not a valid selector."

另外我不確定如何實現這行代碼：

 $("#timeline t").not(":lt(" + x + ")").hide();

在核心javascript中。 如何使用核心 javascript 實現相同的功能？

Answer 1

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="timeline" id="timeline" > <t style="display:none"><div>Hi</div></t> <t style="display:none"><div>Hello</div></t> <t style="display:none"><div>How</div></t> <t style="display:none"><div>Are</div></t> <t style="display:none"><div>You</div></t> <t style="display:none"><div>I'm</div></t> <t style="display:none"><div>really</div></t> <t style="display:none"><div>Good</div></t> <t style="display:none"><div>x</div></t> <t style="display:none"><div>y</div></t> <t style="display:none"><div>z</div></t> </div> <button id="loadMoreprodDiv" class='loadMore'>View More Details</button><button id="showlessprodDiv" class='showLess' style="display:inline-block">View Less Details</button> <script> var rowslength = 5; size_timelinediv = document.querySelectorAll("#timeline t").length; console.log(size_timelinediv)//prints 11 var x = 3; //number of cards to be displayed if (rowslength < 4) { // $("#loadMoreprodDiv").hide(); document.querySelector("#loadMoreprodDiv").style.display = "none"; } if (x == 3) { //alert(rowslength) //$("#showlessprodDiv").hide(); document.querySelector("#showlessprodDiv").style.display = "none"; } showOnly(document.querySelectorAll("#timeline t"),x); document.getElementById("loadMoreprodDiv").onclick = function () { x = (x + 5 <= size_timelinediv) ? x + 5 : size_timelinediv; showOnly(document.querySelectorAll("#timeline t"),x); //$("#showlessprodDiv").show(); document.querySelector("#showlessprodDiv").style.display = "block"; if (x == size_timelinediv) { //$("#loadMoreprodDiv").hide(); document.querySelector("#loadMoreprodDiv").style.display = "none"; } } document.getElementById("showlessprodDiv").onclick = function () { x = (x - 5 <= 3) ? 3 : x - 5; showOnly(document.querySelectorAll("#timeline t"),x); document.querySelector("#loadMoreprodDiv").style.display = "block"; document.querySelector("#showlessprodDiv").style.display = "block"; //$("#loadMoreprodDiv").show(); //$("#showlessprodDiv").show(); if (x == 3) { document.querySelector("#showlessprodDiv").style.display = "none"; //$("#showlessprodDiv").hide(); } } function showOnly(nodeList, index) { for (i = 0; i < nodeList.length; i++ ) { nodeList[i].style.display = i<index ? "block": "none"; } } </script>

看來，純 js 無法識別“lt”（小於）用法。 所以我寫了這個輔助函數來顯示節點列表中特定索引的元素。

function showOnly(nodeList, index) {
 for (i = 0; i < nodeList.length; ++i ) {
   nodeList[i].style.display = i<index ? "block": "none";
 }
}

以下語句僅顯示前 3 個元素，並從選擇器返回的元素列表中隱藏其余元素。

showOnly(document.querySelectorAll("#timeline t"),3);