如何使用模板文字隐藏从数组循环生成的特定数量的 div

Question

我正在尝试通过将每个项目的对象添加到数组中来轻松地将项目添加到我的投资组合中，问题是我只想显示三个项目，并且每当有人点击它显示的按钮时这一切

我尝试使用“break” 还尝试制作一个布尔变量 没用

let arrname = [
	{name: "project one"}, 
  {name: "project two"},
	{name: "project three"},
	{name: "project four"},
	{name: "project five"},
	{name: "project six"}
];

for(let i=0; i < arrname.length; i++){

		let stmain = `
		<div id="main" class="main">
  		<div class="img"></div>
  		<div class="info">
   			<p>${arrname[i].name}</p>
  		</div>
		</div>
	`;
		mylist = document.getElementById('test');		
		mylist.insertAdjacentHTML('beforeend', stmain);
}	

.main{
  width: 300px;
  height: 300px;
  margin: 2rem auto;
  background-color: #2b2b2b;
  color: #ffffff;
	
}
.img{
  width: 100%;
  height: 80%;
  background-color: #dddddd;
}
.info{
  padding-left: 20px;
}
button{
	position: fixed;
	top: 0;
}

<div id="test"></div>
<button id="btun">show more/less</button>

Answer 1

不会是最好的脚本，但希望这能让您进一步了解您需要什么

对于 js

    const projects2show = 3;
    let arrname = [
        { name: "project one" },
        { name: "project two" },
        { name: "project three" },
        { name: "project four" },
        { name: "project five" },
        { name: "project six" },
        { name: "project seven" },
        { name: "project eight" },
    ];

    for (let i = 0; i < arrname.length; i++) {

        let stmain = `
    <div id="${i + 1}" class="main hide">
    <div class="img"></div>
    <div class="info">
        <p>${arrname[i].name}</p>
    </div>
    </div>
`;
        mylist = document.getElementById('test');
        mylist.insertAdjacentHTML('beforeend', stmain);
    }


    function showProjects() {
        const projects = document.getElementsByClassName('hide');
        for (let i = 0; i < projects2show; i++) {
            if (projects[0]) projects[0].classList.remove('hide');
        }
    }
    showProjects();


    const show = document.getElementById('btun');
    show.addEventListener('click', () => {
        showProjects();
    })

对于 css 我刚刚添加了这个

.hide {
    display: none;
}

基本上我在开始时隐藏所有项目，然后只显示前 3 个。 单击按钮时，获取所有隐藏的，然后显示前三个，再次单击时，执行相同操作

再次，只是希望这会给你一些想法

Answer 2

我想通了

let arrname = [
	{name: "project one"}, 
  {name: "project two"},
	{name: "project three"},
	{name: "project four"},
	{name: "project five"},
	{name: "project six"}
];

for(let i=0; i < arrname.length; i++){
		
		let stmain = `
		<div id="main" class="main">
  		<div class="img"></div>
  		<div class="info">
   			<p>${arrname[i].name}</p>
  		</div>
		</div>
	`;
		mylist = document.getElementById('test');		
		mylist.insertAdjacentHTML('beforeend', stmain);
}

let bool = false;

function myFunc(){
	for(let x = 3; x < arrname.length; x++){
		if(bool == false){
			document.getElementsByClassName("main")[x].classList.add("hide");
		}else{
			document.getElementsByClassName("main")[x].classList.remove("hide");
		}
	}
}
myFunc();


let btn = document.getElementById("bton");
btn.onclick = function(){
	bool = !bool;
	myFunc();
}

.main{
  width: 300px;
  height: 300px;
  margin: 2rem auto;
  background-color: #2b2b2b;
  color: #ffffff;
	
}
.img{
  width: 100%;
  height: 80%;
  background-color: #dddddd;
}
.info{
  padding-left: 20px;
}
button{
	position: fixed;
	top: 0;
}
.hide{
	display: none;
}

<div id="test"></div>
<button id="bton">click me</button>