JS点击图片时如何输出同ID对应的描述元素到控制台

注意：你的现有HTML存在重复id的不规范写法，标准规范中id属性需要全局唯一，重复id会导致全局id查询接口返回错误结果，因此查找对应描述时必须限定在当前答题区块范围内，不要做全局查询。

你现有事件回调中的this指向的就是当前绑定事件的.answer答题区块容器，在这个容器范围内查找对应id的描述元素，就不会出现跨区块匹配错误的问题。

修改后可直接运行的代码 #

for (var i = 0 ; i < option.length; i++) {
    option[i].addEventListener('click', function(e) {
        var target = e.target.closest('.picture');
        if(target) {
            let old = this.querySelector('.picture.active');
            if(old) old.classList.remove('active');
            target.classList.add('active');

            // 新增功能逻辑
            const currentPicId = target.id;
            // 限定在当前答题块内查找同id的描述元素
            const matchDescription = this.querySelector(`.discriptions .description[id="${currentPicId}"]`);
            console.log('匹配到的对应描述元素：', matchDescription);
            // 如果需要输出描述的文字内容，放开下面这行注释即可
            // console.log('描述文本：', matchDescription.textContent);
        }
    })
}

核心逻辑说明 #

• 所有元素查找都限定在当前触发事件的答题区块（即回调里的this）内部，完全规避两个答题块id重复导致的匹配错误
• 用CSS属性选择器匹配id和当前选中图片id一致的.description元素，精准定位目标节点
• 如果你后续修正了HTML重复id的问题，把查找范围换成全局document.getElementById(currentPicId)也可以正常运行，但限定容器范围的写法容错性更高

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