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

function showInfos(e) {    // 使用 e.target.querySelector 查找当前点击按钮内部的 .showdetails 元素    const showdetails = e.target.querySelector('.showdetails');    if (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;        // 确保所有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 = `
            @@##@@            
${agentName}
            View                
                                         
${desc}
                    
                        
                            @@##@@                            
${ability1.displayName}
                        
                        
                            @@##@@                            
${ability2.displayName}
                    
                                                                                                    
                            Sora                            
Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。
                            
                                                                538                            
                        
                                                    查看详情                                                                        
                                        
                        
                            @@##@@                            
${ability3.displayName}
                        
                        
                            @@##@@                            
${ability4.displayName}
                        
                    
                    
                    
`;        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'; // 或者根据实际内容调整});

/* ... 其他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样式 ... */