JavaScript事件处理器问题：点击Div仅显示当前子元素文本

问题代码 #

HTML

<body>
    
    <div class="common">
        <h1>Text one</h1>
        <p class="text">Hello</p>
    </div>
    <div class="common">
        <h1>Text two</h1>
        <p class="text">Good morning</p>
    </div>
    <div class="common">
        <h1>Text three</h1>
        <p class="text">Lets code</p>
    </div>

    <script src="app.js"></script>
</body>

CSS

.text{
    display: none;
}
.common{
    border: 1px solid;
}

原JavaScript代码（存在问题）

const divs_demo = document.querySelectorAll('.common');
const display_texts = document.querySelectorAll('.text');

for(let div_demo of divs_demo){
    div_demo.addEventListener('click', ()=>{
        for(let display_text of display_texts){
            display_text.style.display = 'block';
        };
    });
};

问题说明 #

当前代码点击任意common类div时，所有text类文本都会显示，需求是仅展示被点击div内部的对应文本，且代码无需重复冗余。

解决方案 #

核心思路是仅操作当前点击div内部的目标元素，不需要提前遍历所有text元素，既高效又精准。

方案一：直接通过绑定元素查找子元素

const divs_demo = document.querySelectorAll('.common');

for(let div_demo of divs_demo){
    div_demo.addEventListener('click', () => {
        // 在当前点击的div范围内查找.text元素
        const targetText = div_demo.querySelector('.text');
        targetText.style.display = 'block';
    });
};

方案二：利用事件对象的currentTarget（更灵活）

如果点击的是div内部的子元素（比如h1），e.currentTarget会始终指向绑定事件的div元素，避免误判：

const divs_demo = document.querySelectorAll('.common');

for(let div_demo of divs_demo){
    div_demo.addEventListener('click', (e) => {
        const targetText = e.currentTarget.querySelector('.text');
        targetText.style.display = 'block';
    });
};

可选优化：切换显示/隐藏状态

如果需要点击时切换文本的显示与隐藏，可以修改为：

const divs_demo = document.querySelectorAll('.common');

for(let div_demo of divs_demo){
    div_demo.addEventListener('click', (e) => {
        const targetText = e.currentTarget.querySelector('.text');
        targetText.style.display = targetText.style.display === 'block' ? 'none' : 'block';
    });
};

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