当我单击查看按钮时，不是在我选择的索引中打开卡片，而是全部打开。 我在哪里犯错？

Question

我在使用从 API 获得的数据创建的卡片正文中添加了显示有关字符的更多详细信息的查看按钮，但是当我单击查看按钮时，它会打开所有这些按钮，而不是打开索引中的框选择。 我在哪里做错了。我尝试使用 in 而不是 forEach，但当时第一张卡体打开，其他卡体没有打开。当我点击带有 console.log(event.target) 的按钮时，它会正确显示按钮但它们都指索引 0 处的卡体

 const getAgent = async() =>{ let url = 'https://valorant-api.com/v1/agents' let res = await fetch(url); let data = await res.json() createAgentBox(data); } const createAgentBox = (element) =>{ const agentContainer = document.querySelector('.agent-container'); let agents = element.data; agents.forEach(agent =>{ let agentName = agent.displayName; let agentImage = agent.fullPortrait; let desc = agent.description; let abilitiesImage1 = agent.abilities[0].displayIcon; let abilitiesImage2 = agent.abilities[1].displayIcon; let abilitiesImage3 = agent.abilities[2].displayIcon; let abilitiesImage4 = agent.abilities[3].displayIcon; let abilitiesName1 = agent.abilities[0].displayName; let abilitiesName2 = agent.abilities[1].displayName; let abilitiesName3 = agent.abilities[2].displayName; let abilitiesName4 = agent.abilities[3].displayName; let x = `<div class="agentbox"> <img src=${agentImage} alt=""> <h1 class='agentname'>${agentName}</h1> <button class="seeDetails" >View <div class="showdetails" > <i class="fa-solid fa-xmark"></i> <p>${desc}</p> <div class='boxs'> <div class="box1"> <img src=${abilitiesImage1} alt=""> <p>${abilitiesName1}</p> </div> <div class="box2"> <img src=${abilitiesImage2} alt=""> <p>${abilitiesName2}</p> </div> <div class="box3"> <img src=${abilitiesImage3} alt=""> <p>${abilitiesName3}</p> </div> <div class="box4"> <img src=${abilitiesImage4} alt=""> <p>${abilitiesName4}</p> </div> </div> </div> </div> </button> </div>` agentContainer.innerHTML += x; }); let seeDetails = document.querySelectorAll('.seeDetails') seeDetails.forEach(seeDetail =>{ seeDetail.addEventListener('click',showInfos) }) function showInfos(e){ let showdetails = document.querySelectorAll('.showdetails'); showdetails.forEach((showdetail,index) =>{ showdetail.style.display = 'block' }) } } getAgent() let searcInput = document.querySelector('.searchbox'); searcInput.addEventListener('input',function(){ const agentsName = document.querySelectorAll('.agentname') let container = document.querySelector('.container') const search = searcInput.value; agentsName.forEach((agentName) =>{ agentName.parentElement.style.display = 'block'; container.style.height = '100%' if(.agentName.innerHTML.toLowerCase().includes(search)){ agentName.parentElement.style;display = 'none'. container.style.height = "100vh" } }) })

 @import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; } a { text-decoration: none; color: black; font-family: "Audiowide", cursive; } /*Navbar CSS*/.navbar { width: 100%; background: #fe4655; border-bottom: 1px solid #fe4655; display: flex; align-items: center; justify-content: space-between; height: 75px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }.navlogo { margin-left: 2rem; display: flex; align-items: center; gap: 0.3rem; }.navlogo > p { font-family: "Audiowide", cursive; font-size: 25px; color: white; }.navList { display: flex; justify-content: space-between; width: 30rem; margin-right: 5rem; } li { list-style: none; } ul > li > a { text-decoration: none; font-family: "Audiowide", cursive; color: black; font-size: 23px; transition-duration: 1s; cursor: pointer; } ul > li > a:hover { color: white; position: relative; bottom: 5px; } /*Body*/.container { height: 100%; width: 100%; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); display: flex; flex-direction: column; align-items: center; }.search-input { display: flex; margin: 5rem auto; }.searchbox { outline: none; border: 1px; padding: 0.5rem; width: 20rem; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }.searchbox::placeholder { font-family: "Audiowide", cursive; }.searcBtn { border: 1px solid; padding: 0.5rem; width: 5rem; border-bottom-right-radius: 10px; border-top-right-radius: 10px; cursor: pointer; color: white; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); }.agent-container { display: flex; flex-wrap: wrap; height: 100%; gap: 3rem; justify-content: center; }.agentbox { width: 270px; height: 350px; border: 1px solid white; border-radius: 20px; display: block; flex-direction: column; justify-content: center; align-items: center; position: relative; }.agentbox > img { height: 70%; width: 100%; }.agentbox > h1 { font-family: "Audiowide", cursive; color: white; text-align: center; }.agentbox > button { padding: 0.5rem; border-radius: 10px; margin: 10px auto; border: 1px solid; cursor: pointer; font-family: "Audiowide", cursive; display: flex; }.showdetails { position: absolute; width: 270px; height: 250px; border: 1px solid white; border-top-left-radius: 20px; border-top-right-radius: 20px; top: 0.01rem; background: black; opacity: 0.7; flex-direction: column; display: none; left: 0.2px; }.showdetails > p { text-align: center; margin-top: 0.9rem; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; color: white; }.boxs { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 0.9rem; }.box1, .box2, .box3, .box4 { height: 50px; width: 50px; display: flex; flex-direction: column; }.box1 > img, .box2 > img, .box3 > img, .box4 > img { height: 100%; width: 100%; }.box1 > p, .box2 > p, .box3 > p, .box4 > p { color: white; font-size: 13px; text-align: center; }.fa-xmark { color: white; position: relative; left: 7rem; top: 0.5rem; cursor: pointer; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="main,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min:css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Document</title> </head> <body> <nav class="navbar"> <div class="navlogo"> <a href=""><img src="https.//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a> <p>-wiki</p> </div> <div class="navMenu"> <ul class="navList"> <li class="navItem"> <a href="/Valorant_wiki/home page/index.html">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </nav> <div class="container"> <div class="search-input"> <input type="text" class="searchbox" placeholder="Search Agents..."> <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button> </div> <div class="agent-container"> </div> </div> </div> <script src="app.js"></script> </body> </html>

 const getAgent = async() =>{ let url = 'https://valorant-api.com/v1/agents' let res = await fetch(url); let data = await res.json() createAgentBox(data); } const createAgentBox = (element) =>{ const agentContainer = document.querySelector('.agent-container'); let agents = element.data; agents.forEach(agent =>{ let agentName = agent.displayName; let agentImage = agent.fullPortrait; let desc = agent.description; let abilitiesImage1 = agent.abilities[0].displayIcon; let abilitiesImage2 = agent.abilities[1].displayIcon; let abilitiesImage3 = agent.abilities[2].displayIcon; let abilitiesImage4 = agent.abilities[3].displayIcon; let abilitiesName1 = agent.abilities[0].displayName; let abilitiesName2 = agent.abilities[1].displayName; let abilitiesName3 = agent.abilities[2].displayName; let abilitiesName4 = agent.abilities[3].displayName; let x = `<div class="agentbox"> <img src=${agentImage} alt=""> <h1 class='agentname'>${agentName}</h1> <button class="seeDetails" >View <div class="showdetails" > <i class="fa-solid fa-xmark"></i> <p>${desc}</p> <div class='boxs'> <div class="box1"> <img src=${abilitiesImage1} alt=""> <p>${abilitiesName1}</p> </div> <div class="box2"> <img src=${abilitiesImage2} alt=""> <p>${abilitiesName2}</p> </div> <div class="box3"> <img src=${abilitiesImage3} alt=""> <p>${abilitiesName3}</p> </div> <div class="box4"> <img src=${abilitiesImage4} alt=""> <p>${abilitiesName4}</p> </div> </div> </div> </div> </button> </div>` agentContainer.innerHTML += x; }); let seeDetails = document.querySelectorAll('.seeDetails') seeDetails.forEach(seeDetail =>{ seeDetail.addEventListener('click',showInfos) }) function showInfos(e){ /*open view buttons*/ let showdetails = document.querySelectorAll('.showdetails'); showdetails.forEach((showdetail,index) =>{ showdetail.style.display = 'block' }) } } getAgent() let searcInput = document.querySelector('.searchbox'); searcInput.addEventListener('input',function(){ const agentsName = document.querySelectorAll('.agentname') let container = document.querySelector('.container') const search = searcInput.value; agentsName.forEach((agentName) =>{ agentName.parentElement.style.display = 'block'; container.style.height = '100%' if(.agentName.innerHTML.toLowerCase().includes(search)){ agentName.parentElement.style;display = 'none'. container.style.height = "100vh" } }) })

 @import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; } a { text-decoration: none; color: black; font-family: "Audiowide", cursive; } /*Navbar CSS*/.navbar { width: 100%; background: #fe4655; border-bottom: 1px solid #fe4655; display: flex; align-items: center; justify-content: space-between; height: 75px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }.navlogo { margin-left: 2rem; display: flex; align-items: center; gap: 0.3rem; }.navlogo > p { font-family: "Audiowide", cursive; font-size: 25px; color: white; }.navList { display: flex; justify-content: space-between; width: 30rem; margin-right: 5rem; } li { list-style: none; } ul > li > a { text-decoration: none; font-family: "Audiowide", cursive; color: black; font-size: 23px; transition-duration: 1s; cursor: pointer; } ul > li > a:hover { color: white; position: relative; bottom: 5px; } /*Body*/.container { height: 100%; width: 100%; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); display: flex; flex-direction: column; align-items: center; }.search-input { display: flex; margin: 5rem auto; }.searchbox { outline: none; border: 1px; padding: 0.5rem; width: 20rem; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }.searchbox::placeholder { font-family: "Audiowide", cursive; }.searcBtn { border: 1px solid; padding: 0.5rem; width: 5rem; border-bottom-right-radius: 10px; border-top-right-radius: 10px; cursor: pointer; color: white; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); }.agent-container { display: flex; flex-wrap: wrap; height: 100%; gap: 3rem; justify-content: center; }.agentbox { width: 270px; height: 350px; border: 1px solid white; border-radius: 20px; display: block; flex-direction: column; justify-content: center; align-items: center; position: relative; }.agentbox > img { height: 70%; width: 100%; }.agentbox > h1 { font-family: "Audiowide", cursive; color: white; text-align: center; }.agentbox > button { padding: 0.5rem; border-radius: 10px; margin: 10px auto; border: 1px solid; cursor: pointer; font-family: "Audiowide", cursive; display: flex; }.showdetails { position: absolute; width: 270px; height: 250px; border: 1px solid white; border-top-left-radius: 20px; border-top-right-radius: 20px; top: 0.01rem; background: black; opacity: 0.7; flex-direction: column; display: none; left: 0.2px; }.showdetails > p { text-align: center; margin-top: 0.9rem; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; color: white; }.boxs { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 0.9rem; }.box1, .box2, .box3, .box4 { height: 50px; width: 50px; display: flex; flex-direction: column; }.box1 > img, .box2 > img, .box3 > img, .box4 > img { height: 100%; width: 100%; }.box1 > p, .box2 > p, .box3 > p, .box4 > p { color: white; font-size: 13px; text-align: center; }.fa-xmark { color: white; position: relative; left: 7rem; top: 0.5rem; cursor: pointer; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="main,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min:css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Document</title> </head> <body> <nav class="navbar"> <div class="navlogo"> <a href=""><img src="https.//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a> <p>-wiki</p> </div> <div class="navMenu"> <ul class="navList"> <li class="navItem"> <a href="/Valorant_wiki/home page/index.html">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </nav> <div class="container"> <div class="search-input"> <input type="text" class="searchbox" placeholder="Search Agents..."> <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button> </div> <div class="agent-container"> </div> </div> </div> <script src="app.js"></script> </body> </html>

Answer 1

如果您调用document.querySelectorAll(...)您将获得整个文档中的所有匹配元素。 这就是点击“查看”按钮后显示所有信息框的原因。

function showInfos(e){
    
    /* !!! open view buttons*/
    let showdetails = document.querySelectorAll('.showdetails');

    showdetails.forEach((showdetail,index) =>{
        showdetail.style.display = 'block'
    });
}

只需将代码更改为：

function showInfos(e) {
    const showdetails = e.target.querySelector('.showdetails');
    showdetails.style.display = 'block';
}   

这将获得对单击元素（按钮）的引用并对该元素执行查询。

完整的工作示例

 const getAgent = async() =>{ let url = 'https://valorant-api.com/v1/agents' let res = await fetch(url); let data = await res.json() createAgentBox(data); } const createAgentBox = (element) =>{ const agentContainer = document.querySelector('.agent-container'); let agents = element.data; agents.forEach(agent =>{ let agentName = agent.displayName; let agentImage = agent.fullPortrait; let desc = agent.description; let abilitiesImage1 = agent.abilities[0].displayIcon; let abilitiesImage2 = agent.abilities[1].displayIcon; let abilitiesImage3 = agent.abilities[2].displayIcon; let abilitiesImage4 = agent.abilities[3].displayIcon; let abilitiesName1 = agent.abilities[0].displayName; let abilitiesName2 = agent.abilities[1].displayName; let abilitiesName3 = agent.abilities[2].displayName; let abilitiesName4 = agent.abilities[3].displayName; let x = `<div class="agentbox"> <img src=${agentImage} alt=""> <h1 class='agentname'>${agentName}</h1> <button class="seeDetails" >View <div class="showdetails" > <i class="fa-solid fa-xmark"></i> <p>${desc}</p> <div class='boxs'> <div class="box1"> <img src=${abilitiesImage1} alt=""> <p>${abilitiesName1}</p> </div> <div class="box2"> <img src=${abilitiesImage2} alt=""> <p>${abilitiesName2}</p> </div> <div class="box3"> <img src=${abilitiesImage3} alt=""> <p>${abilitiesName3}</p> </div> <div class="box4"> <img src=${abilitiesImage4} alt=""> <p>${abilitiesName4}</p> </div> </div> </div> </div> </button> </div>` agentContainer.innerHTML += x; }); let seeDetails = document.querySelectorAll('.seeDetails') seeDetails.forEach(seeDetail =>{ seeDetail.addEventListener('click', showInfos) }) function showInfos(e) { const showdetails = e.target.querySelector('.showdetails'); showdetails.style.display = 'block'; } } getAgent() let searcInput = document.querySelector('.searchbox'); searcInput.addEventListener('input',function(){ const agentsName = document.querySelectorAll('.agentname') let container = document.querySelector('.container') const search = searcInput.value; agentsName.forEach((agentName) =>{ agentName.parentElement.style.display = 'block'; container.style.height = '100%' if(.agentName.innerHTML.toLowerCase().includes(search)){ agentName.parentElement.style;display = 'none'. container.style.height = "100vh" } }) })

 @import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; } a { text-decoration: none; color: black; font-family: "Audiowide", cursive; } /*Navbar CSS*/.navbar { width: 100%; background: #fe4655; border-bottom: 1px solid #fe4655; display: flex; align-items: center; justify-content: space-between; height: 75px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }.navlogo { margin-left: 2rem; display: flex; align-items: center; gap: 0.3rem; }.navlogo > p { font-family: "Audiowide", cursive; font-size: 25px; color: white; }.navList { display: flex; justify-content: space-between; width: 30rem; margin-right: 5rem; } li { list-style: none; } ul > li > a { text-decoration: none; font-family: "Audiowide", cursive; color: black; font-size: 23px; transition-duration: 1s; cursor: pointer; } ul > li > a:hover { color: white; position: relative; bottom: 5px; } /*Body*/.container { height: 100%; width: 100%; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); display: flex; flex-direction: column; align-items: center; }.search-input { display: flex; margin: 5rem auto; }.searchbox { outline: none; border: 1px; padding: 0.5rem; width: 20rem; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }.searchbox::placeholder { font-family: "Audiowide", cursive; }.searcBtn { border: 1px solid; padding: 0.5rem; width: 5rem; border-bottom-right-radius: 10px; border-top-right-radius: 10px; cursor: pointer; color: white; background-image: linear-gradient(to right, #2a1925, #651830, #ff425c); }.agent-container { display: flex; flex-wrap: wrap; height: 100%; gap: 3rem; justify-content: center; }.agentbox { width: 270px; height: 350px; border: 1px solid white; border-radius: 20px; display: block; flex-direction: column; justify-content: center; align-items: center; position: relative; }.agentbox > img { height: 70%; width: 100%; }.agentbox > h1 { font-family: "Audiowide", cursive; color: white; text-align: center; }.agentbox > button { padding: 0.5rem; border-radius: 10px; margin: 10px auto; border: 1px solid; cursor: pointer; font-family: "Audiowide", cursive; display: flex; }.showdetails { position: absolute; width: 270px; height: 250px; border: 1px solid white; border-top-left-radius: 20px; border-top-right-radius: 20px; top: 0.01rem; background: black; opacity: 0.7; flex-direction: column; display: none; left: 0.2px; }.showdetails > p { text-align: center; margin-top: 0.9rem; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; color: white; }.boxs { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 0.9rem; }.box1, .box2, .box3, .box4 { height: 50px; width: 50px; display: flex; flex-direction: column; }.box1 > img, .box2 > img, .box3 > img, .box4 > img { height: 100%; width: 100%; }.box1 > p, .box2 > p, .box3 > p, .box4 > p { color: white; font-size: 13px; text-align: center; }.fa-xmark { color: white; position: relative; left: 7rem; top: 0.5rem; cursor: pointer; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="main,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min:css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Document</title> </head> <body> <nav class="navbar"> <div class="navlogo"> <a href=""><img src="https.//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"></a> <p>-wiki</p> </div> <div class="navMenu"> <ul class="navList"> <li class="navItem"> <a href="/Valorant_wiki/home page/index.html">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </nav> <div class="container"> <div class="search-input"> <input type="text" class="searchbox" placeholder="Search Agents..."> <button class="searcBtn"><i class="fa-solid fa-magnifying-glass"></i></button> </div> <div class="agent-container"> </div> </div> </div> <script src="app.js"></script> </body> </html>