解决JavaScript中点击按钮导致所有相关元素同时显示的问题

// 原始的 showInfos 函数
function showInfos(e){
    /*open view buttons*/
    let showdetails = document.querySelectorAll('.showdetails'); // 问题所在：全局查询
    showdetails.forEach((showdetail,index) =>{
        showdetail.style.display = 'block'; // 遍历并显示所有找到的元素
    });
}

function showInfos(e) {
    // e.target 指向被点击的按钮元素
    // 在被点击按钮的子元素中查找第一个 .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;
        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);
    });

    // 修正后的 showInfos 函数
    function showInfos(e) {
        // 在被点击的按钮（e.target）内部查找 .showdetails 元素
        const showdetails = e.target.querySelector('.showdetails');
        if (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";
        }
    });
});

<button class="seeDetails">View
    <div class="showdetails">
        <!-- 详情内容 -->
    </div>
</button>

.showdetails {
  /* ... 其他样式 ... */
  display: none; /* 初始隐藏 */
  /* ... 其他样式 ... */
}