如何遵循DRY原则用同一函数实现多输入框关联label的样式修改

问题核心原因 #

• 原函数中document.getElementsByClassName('label')[0]是全局获取第一个带label类的元素，所以不管操作哪个输入框，都只会修改第一个label的样式
• 原代码存在id重复问题，所有输入框最后都被设置为相同idfloatingFirstName，同时每个输入框后都重复写了属性设置脚本，违背DRY原则
• 原样式代码中translateY(-0.5 rem)的数值和单位之间多了空格，会导致CSS不生效

优化后代码 #

1. 统一事件处理&初始化脚本 #

// 通用样式处理函数，所有输入框共用这一个
function newStyling(that) {
  // 仅查找当前输入框所属容器内的label，避免影响其他字段
  const parentContainer = that.closest('.custom_floating');
  const targetLabel = parentContainer.querySelector('.label');
  if (that.value.trim() !== "") {
    targetLabel.style.opacity = "0.65";
    targetLabel.style.transform = "scale(0.85) translateY(-0.5rem) translateX(0.15rem)";
  } else {
    // 可选：输入内容清空时还原label样式
    targetLabel.style.opacity = "1";
    targetLabel.style.transform = "none";
  }
}

// 统一初始化所有输入框属性，不用每个输入框单独写脚本
window.addEventListener('DOMContentLoaded', () => {
  // 初始化First Name输入框
  const firstNameInput = document.getElementById('firstname');
  firstNameInput.setAttribute('placeholder', 'First Name');
  firstNameInput.classList.add('form-control');
  firstNameInput.setAttribute('id', 'floatingFirstName');
  
  // 初始化Last Name输入框
  const lastNameInput = document.getElementById('lastname');
  lastNameInput.setAttribute('placeholder', 'Last Name');
  lastNameInput.classList.add('form-control');
  lastNameInput.setAttribute('id', 'floatingLastName');
})

2. 简化后的HTML结构 #

<!-- First Name Input -->
<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" id="firstname" placeholder="First Name" onchange="newStyling(this)">
    </span>
    <label for="floatingFirstName" class="label">First Name <span style="color: red;">*</span></label>
  </div>
</div>
<!-- Last Name Input -->
<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" id="lastname" placeholder="" onchange="newStyling(this)">
    </span>
    <label for="floatingLastName" class="label">Last Name <span style="color: red;">*</span></label>
  </div>
</div>

扩展说明 #

如果后续新增更多输入字段，完全不需要重复编写逻辑，仅需要两步即可：

1. 新增对应HTML结构，给输入框绑定onchange="newStyling(this)"事件
2. 在统一初始化脚本中新增对应输入框的属性配置即可，也可以进一步把配置做成数组循环初始化，彻底消除初始化阶段的重复代码

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