JS - 在纯JS中确定计数后隐藏div

Question

我有一个页面，用户可以输入他们想要的特定类的div（filterDiv）。如果项目的数量超过9，我希望显示“加载更多”按钮。

问题是我试图在第九次迭代后使用类filterDiv访问div并添加一个隐藏类。

这是我的代码：

ALTER TABLE `tablename` ADD UNIQUE `unique_index`(`columnOneName`, `columnTwoName`);

如果单击“加载更多”按钮，我将如何添加代码来隐藏div 10,11,12等？

Answer 1

如果您的文档包含如下所示的div：

<div class=“myDiv”> content </div>

你可以先得到所有的div：

var myDivs = document.getEmementsByClassName(“myDiv”);

然后循环遍历它们并通过指定它们的样式属性来隐藏其中一些：

for(var i = 9; i < myDivs.length; i++) {
    myDivs[i].style.display = “none”
}

因此，我们循环索引从9到数组结束并使它们不可见。 item的直接样式属性优先于class的css，因此元素将隐藏，您可以在css中指定可见元素的所有属性。

然后，当单击一个按钮时，您可以执行相同的循环，只需更改为.style.display = “block”

for(var i = 9; i < myDivs.length; i++) {
    myDivs[i].style.display = “block”
}