使用模板文字隐藏从数组循环生成的一定数量的div可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-div {
display: none;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 创建包含数据的数组
var data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
// 循环遍历数组
for (var i = 0; i < data.length; i++) {
// 创建div元素并插入数组元素的值
var div = document.createElement('div');
div.textContent = data[i];
// 添加CSS类名以隐藏div元素
div.classList.add('hidden-div');
// 将生成的div元素添加到页面中的容器元素
document.getElementById('container').appendChild(div);
}
</script>
</body>
</html>
在上述示例中,我们使用了一个包含5个元素的数组,并通过循环生成了5个div元素。每个div元素都包含了数组元素的值,并且通过CSS样式将其隐藏起来。你可以根据需要修改数组的内容和生成的div数量。
领取专属 10元无门槛券
手把手带您无忧上云