修正后的 showInfos 函数应该如下：

function showInfos(e) {
    // 使用 e.target.querySelector() 在被点击按钮的内部查找 .showdetails 元素
    const showdetails = e.target.querySelector('.showdetails');
    // 如果找到了，则将其显示
    if (showdetails) {
        showdetails.style.display = 'block';
    }
}

通过 e.target.querySelector('.showdetails')，我们告诉浏览器：“在当前被点击的按钮 (e.target) 内部，查找第一个匹配 .showdetails 选择器的子元素。”这样，每次点击都只会影响到与该按钮直接关联的详情卡片，实现了精确的控制。

完整示例代码

下面是修正后的 app.js 完整代码，其中包含了获取数据、创建卡片以及正确的事件处理逻辑。

// app.js

// 异步获取Agent数据
const getAgent = async () => {
    let url = 'https://valorant-api.com/v1/agents';
    let res = await fetch(url);
    let data = await res.json();
    createAgentBox(data);
};

// 根据数据创建Agent卡片
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错误
        let abilities = agent.abilities || [];
        let abilitiesImage1 = abilities[0]?.displayIcon;
        let abilitiesImage2 = abilities[1]?.displayIcon;
        let abilitiesImage3 = abilities[2]?.displayIcon;
        let abilitiesImage4 = abilities[3]?.displayIcon;
        let abilitiesName1 = abilities[0]?.displayName;
        let abilitiesName2 = abilities[1]?.displayName;
        let abilitiesName3 = abilities[2]?.displayName;
        let abilitiesName4 = abilities[3]?.displayName;

        // 构建Agent卡片的HTML结构
        let x = `<div class="agentbox">
            @@##@@
            <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">
                            @@##@@
                            <p>${abilitiesName1 || 'N/A'}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1728">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d28da274e764.png" alt="Visla">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1728">Visla</a>
                            <p>AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Visla">
                                <span>100</span>
                            </div>
                        </div>
                        <a href="/ai/1728" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Visla">
                        </a>
                    </div>
                
                        </div>
                        <div class="box2">
                            @@##@@
                            <p>${abilitiesName2 || 'N/A'}</p>
                        </div>
                        <div class="box3">
                            @@##@@
                            <p>${abilitiesName3 || 'N/A'}</p>
                        </div>
                        <div class="box4">
                            @@##@@
                            <p>${abilitiesName4 || 'N/A'}</p>
                        </div>
                    </div>
                </div>
            </button>
        </div>`;

        // 将HTML字符串添加到容器中
        // 注意：innerHTML += 的方式会重新解析整个内容，性能不佳，
        // 推荐使用insertAdjacentHTML或createElement/appendChild
        agentContainer.innerHTML += x;
    });

    // 为所有“View”按钮添加事件监听器
    let seeDetails = document.querySelectorAll('.seeDetails');
    seeDetails.forEach(seeDetail => {
        seeDetail.addEventListener('click', showInfos);
    });

    // 修正后的事件处理函数
    function showInfos(e) {
        // 在被点击的按钮内部查找 .showdetails 元素
        const showdetails = e.currentTarget.querySelector('.showdetails'); // 使用 e.currentTarget 更准确，因为事件可能冒泡
        if (showdetails) {
            showdetails.style.display = 'block';
        }
        // 如果需要关闭功能，可以为 .fa-xmark 添加事件监听器
        const closeButton = showdetails.querySelector('.fa-xmark');
        if (closeButton) {
            closeButton.addEventListener('click', (event) => {
                event.stopPropagation(); // 阻止事件冒泡到父级按钮
                showdetails.style.display = 'none';
            });
        }
    }
};

// 初始化获取数据
getAgent();

// 搜索功能
let searcInput = document.querySelector('.searchbox');
searcInput.addEventListener('input', function () {
    const agentsName = document.querySelectorAll('.agentname');
    let container = document.querySelector('.container'); // 假设 .container 是父级容器
    const search = searcInput.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 = '100%'; // 可能会被搜索结果影响，需要根据实际情况调整
});

HTML 结构（相关部分）

确保你的HTML结构中，详情内容 (.showdetails) 是触发按钮 (.seeDetails) 的子元素，或者可以通过相对路径查询到。在提供的代码中，它是嵌套在按钮内部的。

<!-- index.html (片段) -->
<div class="agentbox">
    @@##@@
    <h1 class='agentname'>Agent Name</h1>
    <button class="seeDetails">View
        <div class="showdetails">
            <i class="fa-solid fa-xmark"></i>
            <p>Description goes here...</p>
            <div class='boxs'>
                <!-- Abilities here -->
            </div>
        </div>
    </button>
</div>

CSS 样式（相关部分）

初始状态下，详情内容应该被隐藏。

/* main.css (片段) */
.showdetails {
  position: absolute;
  /* ...其他样式... */
  display: none; /* 初始状态隐藏 */
  /* ...其他样式... */
}

注意事项与最佳实践

1. e.target vs e.currentTarget: 在事件处理函数中，e.target 指向实际触发事件的元素（例如，如果点击了按钮内的文本，e.target 可能是文本节点）。而 e.currentTarget 始终指向事件监听器所附加的元素（在本例中是