JS异步问题：仅首个邻国卡片可触发主国家切换功能

问题根源 #

1. 事件绑定范围错误：document.querySelector(".click-change") 只会选中页面中第一个带有click-change类的元素，导致只有第一张卡片绑定了点击事件，其余卡片完全没有事件监听。
2. 国家名称获取错误：就算给所有卡片都绑定了事件，document.querySelector(".neighborName") 也只会读取第一个卡片里的国家名称，点击任何卡片都会触发第一个国家的切换逻辑。

解决方案一：事件委托（推荐） #

利用事件冒泡机制，把点击事件绑定到父容器#neighbors上，通过判断点击目标来定位对应的卡片，这种方式更高效，尤其适合动态生成的元素。

修改后的代码：

function renderNeighbors(data) {
    let html = "";
    for (let country of data) {
        html += `
                <div class="col-2 mt-2">
                    <div class="card click-change">
                        <img src="${country.flags.png}" class="card-img-top">
                        <div class="card-body">
                            <h6 class="card-title neighborName">${country.name.common}</h6>    
                        </div>
                    </div>
                </div>
            `;
    }

    const neighborsContainer = document.querySelector("#neighbors");
    neighborsContainer.innerHTML = html;

    // 事件委托：绑定到父容器
    neighborsContainer.addEventListener("click", (e) => {
        // 找到点击的卡片元素
        const targetCard = e.target.closest(".click-change");
        if (targetCard) {
            // 获取当前卡片内的国家名称
            const neighborName = targetCard.querySelector(".neighborName").textContent;
            getCountry(neighborName);
        }
    });
}

关键逻辑说明

• e.target.closest(".click-change")：从点击的元素（比如图片、文字）向上查找最近的卡片元素，确保无论点击卡片内哪个区域都能触发对应逻辑。
• targetCard.querySelector(".neighborName")：仅从当前点击的卡片内获取国家名称，避免全局匹配导致的错误。

解决方案二：循环绑定事件（适合小数量元素） #

如果需要给每个卡片单独绑定事件，可以用document.querySelectorAll选中所有卡片，再循环添加监听：

function renderNeighbors(data) {
    let html = "";
    for (let country of data) {
        html += `
                <div class="col-2 mt-2">
                    <div class="card click-change">
                        <img src="${country.flags.png}" class="card-img-top">
                        <div class="card-body">
                            <h6 class="card-title neighborName">${country.name.common}</h6>    
                        </div>
                    </div>
                </div>
            `;
    }

    document.querySelector("#neighbors").innerHTML = html;

    // 选中所有卡片并循环绑定事件
    const allCards = document.querySelectorAll(".click-change");
    allCards.forEach(card => {
        card.addEventListener("click", () => {
            const neighborName = card.querySelector(".neighborName").textContent;
            getCountry(neighborName);
        });
    });
}

关键逻辑说明

• document.querySelectorAll(".click-change")：获取页面中所有带有click-change类的卡片元素。
• 循环中通过当前card对象获取内部的国家名称，保证每个事件处理函数对应正确的卡片数据。

内容的提问来源于stack exchange，提问作者saydaxz