基于onclick与集合实现按钮仅切换对应元素的显示状态

要实现按钮仅切换所属分组内.one元素的显示状态，核心是让函数能定位到当前点击按钮所在的分组容器，再操作容器内的目标元素。以下是两种实现方案，其中类切换方案更符合前端最佳实践：

方案一：优化直接操作样式 #

修改后的代码 #

HTML

<div>
    <h1>Testing</h1>
    <div class="one">
        <p>Some text</p>
    </div>
    <button onclick="MyFunction(this)">Show more!</button>
</div>
<div>
    <h1>Testing</h1>
    <div class="one">
        <p>Some other text</p>
    </div>
    <button onclick="MyFunction(this)">Show more!</button>
</div>

JavaScript

function MyFunction(btn) {
    // 定位当前按钮所在分组内的.one元素
    const targetElement = btn.parentNode.querySelector('.one');
    if (!targetElement) return; // 避免找不到元素时报错

    // 获取元素实际生效的显示样式（解决初始CSS设置的样式无法通过style.display读取的问题）
    const currentDisplay = window.getComputedStyle(targetElement).display;
    targetElement.style.display = currentDisplay === 'block' ? 'none' : 'block';
}

方案二：类切换（推荐） #

这种方式将样式逻辑完全放在CSS中，JS仅负责切换状态，更易维护和扩展。

修改后的代码 #

CSS

.one {
    display: none;
}
/* 通过类控制显示状态 */
.one.show {
    display: block;
}

HTML

<div>
    <h1>Testing</h1>
    <div class="one">
        <p>Some text</p>
    </div>
    <button onclick="MyFunction(this)">Show more!</button>
</div>
<div>
    <h1>Testing</h1>
    <div class="one">
        <p>Some other text</p>
    </div>
    <button onclick="MyFunction(this)">Show more!</button>
</div>

JavaScript

function MyFunction(btn) {
    const targetElement = btn.parentNode.querySelector('.one');
    if (!targetElement) return;
    // 一行代码完成显示/隐藏切换
    targetElement.classList.toggle('show');
}

关键改动说明 #

1. 传递按钮对象：在onclick中传入this，让函数知道是哪个按钮被点击
2. 精准定位目标元素：通过btn.parentNode.querySelector('.one')仅获取当前按钮所在分组内的.one元素，避免操作全局所有同类元素
3. 类切换优势：将样式逻辑与JS逻辑分离，后续修改显示样式只需调整CSS，无需改动JS代码

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