如何使用模板文字隐藏从数组循环生成的一定数量的 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>

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

How to hide certain numbers of divs generated from array loop using template literal

javascript

arrays

template-literals