使用JS实现独立Div元素各自显示专属文本框

问题根源 #

HTML里id属性必须是唯一的，多个元素用同一个id="infoTab"时，document.getElementById()只会返回第一个匹配的元素，这就是所有按钮点击都只打开第一个文本框的原因。

解决方案 #

下面提供几种实用的实现方式：

方法1：通过this传递按钮，定位对应文本框 #

修改HTML的点击事件，把当前按钮作为参数传入函数，再通过DOM层级关系找到同个.item下的文本框：

完整代码

<section class="wrapper"> 
<div class="item">
  <button type="button" class="btn" onclick="myFunction(this)">Info</button>
  <p>text 1.1</p>
  <div class="infoTab" style="display:none;">
    <p>text 2.1</p>
  </div>
</div>
<div class="item">
  <button type="button" class="btn" onclick="myFunction(this)">Info</button>
  <p>text 1.2</p>
  <div class="infoTab" style="display:none;">
    <p>text 2.2</p>
  </div>
</div>
</section>

function myFunction(btn) {
    // 先找到按钮所在的.item容器，再定位里面的文本框
    var targetTab = btn.closest('.item').querySelector('.infoTab');
    targetTab.style.display = targetTab.style.display === "none" ? "block" : "none";
}

.wrapper {
    display: grid;
    padding-bottom: 400px;
    height: 100%;
    width: 50%;
    background: blue;
    padding: 100px;
    grid-gap: 10px;
}

.wrapper .item {
  display: block;
  width: 200px;
  height: 200px;
  background: green;
  padding: 10px;
}

/* 把原ID选择器改成类选择器 */
.wrapper .item .infoTab {
    width: 100%;
    height: 50%;
    background: white;
    position:relative;
    top: 0;
}

.btn {
  display: block;
  position: relative;
  padding: 10px;
}

方法2：事件委托（无内联事件的优雅写法） #

去掉HTML中的内联onclick，给父容器绑定一次事件，利用事件冒泡处理所有按钮点击，适合动态生成元素的场景：

完整代码

<section class="wrapper"> 
<div class="item">
  <button type="button" class="btn">Info</button>
  <p>text 1.1</p>
  <div class="infoTab" style="display:none;">
    <p>text 2.1</p>
  </div>
</div>
<div class="item">
  <button type="button" class="btn">Info</button>
  <p>text 1.2</p>
  <div class="infoTab" style="display:none;">
    <p>text 2.2</p>
  </div>
</div>
</section>

// 给父容器绑定点击事件
document.querySelector('.wrapper').addEventListener('click', function(e) {
    // 判断点击的是按钮元素
    if (e.target.classList.contains('btn')) {
        var targetTab = e.target.closest('.item').querySelector('.infoTab');
        targetTab.style.display = targetTab.style.display === 'none' ? 'block' : 'none';
    }
});

CSS部分和方法1一致，将ID选择器改为类选择器即可。

方法3：CSS类切换（减少JS操作样式） #

定义一个show类，通过添加/移除类控制显示隐藏，更符合语义化：

新增CSS

.infoTab.show {
    display: block;
}

修改JS（事件委托版本）

document.querySelector('.wrapper').addEventListener('click', function(e) {
    if (e.target.classList.contains('btn')) {
        var targetTab = e.target.closest('.item').querySelector('.infoTab');
        targetTab.classList.toggle('show');
    }
});

HTML中可以去掉infoTab的style="display:none;"，在CSS里默认设置.infoTab { display: none; }。

关键注意点 #

• 严格保证HTML中id的唯一性，重复ID属于不符合规范的写法。
• 利用closest()、querySelector()这类DOM方法，可以精准定位当前按钮对应的目标元素。
• 事件委托能减少事件绑定数量，尤其适合大量重复元素或动态生成元素的场景。

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