JavaScript DOM 事件处理：解决点击按钮时所有卡片同时展开的问题-html教程-PHP中文网

JavaScript DOM 事件处理：解决点击按钮时所有卡片同时展开的问题

本文深入探讨了在使用javascript进行dom操作时，点击“查看详情”按钮导致所有卡片内容同时展开的常见问题。通过分析全局`queryselectorall`的局限性，文章将指导开发者如何利用`event.target`结合`queryselector`来精确地定位并操作与被点击元素相关的特定子元素，从而实现单个卡片内容的独立显示与隐藏，提升用户体验和代码效率。

在构建动态网页应用时，我们经常需要为列表中的每个项目添加交互功能，例如点击按钮显示该项目的详细信息。一个常见的错误模式是，当用户点击某个项目的“查看详情”按钮时，所有项目的详细信息都会同时展开。这通常是由于对DOM查询方法的误用，未能将操作范围限定在事件触发的特定元素上。

理解问题根源：全局DOM查询的误区

在提供的代码示例中，问题出现在showInfos函数中：

function showInfos(e){
    /*open view buttons*/
    let showdetails = document.querySelectorAll('.showdetails'); // 问题所在
    showdetails.forEach((showdetail,index) =>{
        showdetail.style.display = 'block'
    })
}

登录后复制

这里，document.querySelectorAll('.showdetails')会查找整个文档中所有带有showdetails类的元素。无论用户点击哪个“View”按钮，这个函数都会被调用，并且它总是会获取到页面上所有的.showdetails元素，然后遍历它们，将它们的display样式设置为block，从而导致所有卡片详情同时显示。

为了解决这个问题，我们需要确保每次点击事件只影响到与之直接关联的那个.showdetails元素。

立即学习“Java免费学习笔记（深入）”；

精确控制：利用 event.target 进行局部查询

JavaScript的事件对象e（或event）提供了一个非常有用的属性：e.target。e.target指向触发事件的那个DOM元素。在我们的场景中，当一个“View”按钮被点击时，e.target就是那个被点击的<button class="seeDetails">元素。

有了e.target，我们就可以将DOM查询的范围从整个document缩小到仅仅是这个被点击的按钮内部。由于showdetails元素是嵌套在seeDetails按钮内部的（或者更准确地说，是按钮的子元素，尽管HTML结构中showdetails被放在了button内部，这在语义上可能不完全标准，但在DOM结构上是其子节点），我们可以使用e.target.querySelector('.showdetails')来找到当前被点击按钮内部的.showdetails元素。

修改后的showInfos函数将如下所示：

function showInfos(e) {
    // 使用 e.target.querySelector 查找当前点击按钮内部的 .showdetails 元素
    const showdetails = e.target.querySelector('.showdetails');
    if (showdetails) { // 检查元素是否存在
        showdetails.style.display = 'block';
    }
}

登录后复制

通过这种方式，每次点击事件发生时，showdetails变量将只引用到被点击按钮所包含的那个具体的详情面板，从而实现了精确的控制。

完整示例代码

以下是整合了修正后的showInfos函数的完整JavaScript代码，以及相关的HTML和CSS以提供上下文。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

JavaScript (app.js)

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;
        // 确保所有abilities都有数据，避免undefined错误
        const getAbility = (index) => agent.abilities[index] || { displayIcon: '', displayName: '' };
        let ability1 = getAbility(0);
        let ability2 = getAbility(1);
        let ability3 = getAbility(2);
        let ability4 = getAbility(3);

        let x = `<div class="agentbox">
            <img src="${agentImage}" alt="${agentName}">
            <h1 class='agentname'>${agentName}</h1>
            <button class="seeDetails">View
                <div class="showdetails">
                    <i class="fa-solid fa-xmark close-details"></i> <!-- 添加一个类方便关闭 -->
                    <p>${desc}</p>
                    <div class='boxs'>
                        <div class="box1">
                            <img src="${ability1.displayIcon}" alt="${ability1.displayName}">
                            <p>${ability1.displayName}</p>
                        </div>
                        <div class="box2">
                            <img src="${ability2.displayIcon}" alt="${ability2.displayName}">
                            <p>${ability2.displayName}</p>
                        </div>
                        <div class="box3">
                            <img src="${ability3.displayIcon}" alt="${ability3.displayName}">
                            <p>${ability3.displayName}</p>
                        </div>
                        <div class="box4">
                            <img src="${ability4.displayIcon}" alt="${ability4.displayName}">
                            <p>${ability4.displayName}</p>
                        </div>
                    </div>    
                </div>
            </button>
        </div>`;
        agentContainer.innerHTML += x;  
    });   

    let seeDetailsButtons = document.querySelectorAll('.seeDetails');
    seeDetailsButtons.forEach(button => {
        button.addEventListener('click', showInfos);
    });

    // 为关闭按钮添加事件监听器
    document.querySelectorAll('.close-details').forEach(closeButton => {
        closeButton.addEventListener('click', hideInfos);
    });

    function showInfos(e) {
        // 阻止事件冒泡，避免点击关闭按钮时再次触发父级按钮的显示
        e.stopPropagation(); 
        const showdetails = e.currentTarget.querySelector('.showdetails'); // 使用 currentTarget 更稳定
        if (showdetails) {
            showdetails.style.display = 'block';
        }
    }

    function hideInfos(e) {
        e.stopPropagation(); // 阻止事件冒泡
        const showdetails = e.target.closest('.showdetails'); // 找到最近的 .showdetails 父级
        if (showdetails) {
            showdetails.style.display = 'none';
        }
    }
}

getAgent();

let searchInput = document.querySelector('.searchbox');
searchInput.addEventListener('input',function(){
    const agentsName = document.querySelectorAll('.agentname');
    let container  = document.querySelector('.container');
    const search = searchInput.value.toLowerCase();

    agentsName.forEach(agentName => {
        const agentBox = agentName.closest('.agentbox'); // 获取最近的 .agentbox 父级
        if (agentBox) {
            if (!agentName.innerHTML.toLowerCase().includes(search)) {
                agentBox.style.display = 'none';
            } else {
                agentBox.style.display = 'block';
            }
        }
    });
    // 调整容器高度，可能需要更复杂的逻辑来确保在所有卡片隐藏时容器不会收缩过小
    // container.style.height = 'auto'; // 或者根据实际内容调整
});

登录后复制

代码改进说明：

e.currentTarget vs e.target: 在事件监听器中，e.currentTarget始终指向事件绑定到的元素（即.seeDetails按钮），而e.target可能指向按钮内部的任何子元素（如"View"文本）。使用e.currentTarget在某些复杂场景下更为稳健，因为它确保我们总是从按钮本身开始查询。
关闭功能: 为fa-xmark图标添加了close-details类，并为其绑定了hideInfos函数。hideInfos函数使用e.target.closest('.showdetails')来查找最近的.showdetails父元素，并将其隐藏。
阻止事件冒泡: 在showInfos和hideInfos中都添加了e.stopPropagation()，以防止点击详情面板内部的元素（特别是关闭按钮）时，事件冒泡到父级按钮再次触发显示操作。
HTML结构优化: 虽然原代码中将.showdetails直接放在了<button>内部，这在语义上并非最佳实践（按钮通常只包含其文本或图标）。更常见的做法是将详情面板放在与按钮同级的div中，或者作为按钮的兄弟元素，并通过JavaScript或CSS选择器关联。然而，为了保持与原代码结构的一致性并直接解决问题，此处仍沿用了原结构。
数据安全: 在获取agent.abilities时，增加了getAbility辅助函数，以处理可能存在的undefined情况，避免因缺少能力数据而导致脚本错误。
搜索功能优化: 在搜索功能中，使用agentName.closest('.agentbox')来确保我们隐藏的是整个卡片，而不是仅仅是标题。

CSS (main.css)

CSS部分保持不变，但需要确保.showdetails元素的初始状态是display: none;，并且在JavaScript中将其切换为display: block;。

/* ... 其他CSS样式 ... */

.agentbox > button {
  /* ... 按钮样式 ... */
  display: flex; /* 确保按钮可以包含其子元素，如 .showdetails */
  position: relative; /* 确保 .showdetails 的绝对定位相对于按钮 */
  /* 调整按钮样式，可能需要使其不占据整个卡片宽度，以便 .showdetails 可以覆盖 */
  margin: 10px auto; /* 居中 */
  width: fit-content; /* 宽度适应内容 */
}

.showdetails {
  position: absolute;
  width: 270px; /* 或根据需要调整 */
  height: 250px; /* 或根据需要调整 */
  border: 1px solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  top: 0; /* 覆盖整个卡片顶部 */
  left: 0;
  background: rgba(0, 0, 0, 0.9); /* 调整透明度 */
  display: none; /* 初始隐藏 */
  flex-direction: column;
  justify-content: space-around; /* 调整内容对齐 */
  align-items: center;
  padding: 10px;
  z-index: 10; /* 确保在其他内容之上 */
}

.fa-xmark.close-details { /* 为关闭图标添加样式 */
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 1.2em;
  color: white;
}

/* ... 其他CSS样式 ... */

登录后复制

HTML (index.html)

HTML结构保持不变，因为问题主要出在JavaScript的DOM操作逻辑上。

<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>

登录后复制

注意事项与最佳实践

语义化HTML: 尽管上述修复解决了功能问题，但将一个复杂的详情面板直接嵌套在<button>元素内部并非最佳HTML实践。按钮通常用于触发动作，其内容应简洁。更推荐的结构是将详情面板作为卡片的直接子元素，并在点击按钮时通过JavaScript操作其兄弟元素或父元素的子元素。例如：
```
<div class="agentbox">
    <img src="..." alt="">
    <h1 class='agentname'>Agent Name</h1>
    <button class="seeDetails" data-target="#agent-details-id-1">View</button>
    <div class="showdetails" id="agent-details-id-1">
        
    </div>
</div>
```
登录后复制
然后JavaScript中通过e.target.dataset.target获取目标ID并操作。

切换状态: 当前代码只是将display设置为block。一个更好的用户体验是能够再次点击按钮来隐藏详情。这可以通过切换CSS类来实现，例如：

function toggleInfos(e) {
    e.stopPropagation();
    const showdetails = e.currentTarget.querySelector('.showdetails');
    if (showdetails) {
        showdetails.classList.toggle('active'); // 切换 'active' 类
    }
}
// CSS:
// .showdetails { display: none; }
// .showdetails.active { display: block; }

登录后复制

可访问性 (Accessibility): 对于可展开/折叠的内容，应考虑添加ARIA属性，如aria-expanded到按钮上，以及aria-controls指向详情面板的ID，以提升屏幕阅读器用户的体验。

总结

解决点击事件影响所有元素而非单个特定元素的问题，关键在于理解并正确使用事件对象e的target或currentTarget属性，结合局部DOM查询方法（如querySelector或closest）。通过将查询范围限定在事件触发元素的子树内，我们可以精确地控制DOM操作，从而实现预期的交互行为，如单个卡片详情的独立展开与折叠。同时，遵循良好的HTML语义化和添加可访问性属性，能够进一步提升应用的质量和用户体验。

以上就是JavaScript DOM 事件处理：解决点击按钮时所有卡片同时展开的问题的详细内容，更多请关注php中文网其它相关文章！