javascript - 如何在不使用 jquery 的情况下在按钮单击时加载更多或显示更少的 div/卡片

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);