点击input时为对应label添加class的实现方案

我来帮你搞定这个需求！要实现“点击input时给它对应的label添加color类”的效果，咱们用原生JavaScript就能轻松实现，下面给你两种实用的实现方式：

完整代码示例 #

HTML（和你提供的一致） #

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>
<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>
<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

CSS（和你提供的一致） #

.in {position: relative; background: none}
.lb {position: absolute; color: #000; z-index: 1}
.outer {display: block; width: 100%; margin: 60px}
.color {color: green}

JavaScript 实现 #

方式一：事件委托（推荐）

这种方法更高效，而且就算后续动态添加新的.outer元素，点击事件依然能生效：

document.addEventListener('click', function(e) {
  // 确认点击的元素是目标input
  if (e.target.classList.contains('in')) {
    // 找到当前input所在的.outer容器，再定位到里面的label
    const targetLabel = e.target.closest('.outer').querySelector('.lb');
    // 给label添加color类
    targetLabel.classList.add('color');
    
    // 如果需要点击切换类（点一次加，再点一次删），把上面的add换成toggle：
    // targetLabel.classList.toggle('color');
  }
});

方式二：直接绑定事件（适合静态页面）

如果你的页面里所有.outer元素都是一开始就存在的，也可以直接给每个input绑定点击事件：

// 获取所有目标input元素
const inputElements = document.querySelectorAll('.in');

// 遍历每个input，添加点击事件
inputElements.forEach(input => {
  input.addEventListener('click', function() {
    // 通过父元素找到对应的label
    this.parentNode.querySelector('.lb').classList.add('color');
    
    // 切换类的话同样用toggle：
    // this.parentNode.querySelector('.lb').classList.toggle('color');
  });
});

原理说明 #

不管用哪种方式，核心都是精准定位当前点击input对应的label元素：

• 利用.outer作为容器，确保我们找到的label是和当前input同属一个容器的，不会误操作其他span里的元素
• 通过classList.add()（或toggle()）来操作label的类名，实现样式变化

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