如何简化多密码输入框的JavaScript显示/隐藏切换功能？

核心思路是复用通用逻辑，通过统一的类标记和DOM关联，避免重复编写相同的点击事件处理代码。以下是具体实现步骤：

1. 调整HTML结构（统一标记） #

给所有密码切换按钮添加一个共同的类（比如toggle-password），同时通过data-target属性明确绑定对应的密码输入框（或者利用DOM相邻关系关联，二选一即可）：

<!-- 用data-target关联的写法 -->
<div class="password-field">
  <input type="password" id="current-pwd" placeholder="当前密码">
  <button type="button" class="toggle-password" data-target="#current-pwd">显示</button>
</div>
<div class="password-field">
  <input type="password" id="new-pwd" placeholder="新密码">
  <button type="button" class="toggle-password" data-target="#new-pwd">显示</button>
</div>
<div class="password-field">
  <input type="password" id="confirm-pwd" placeholder="确认密码">
  <button type="button" class="toggle-password" data-target="#confirm-pwd">显示</button>
</div>

2. 编写通用的jQuery事件处理 #

只需要绑定一次事件，通过按钮的data-target找到对应的输入框，统一处理type切换逻辑：

$('.toggle-password').on('click', function() {
  // 获取当前按钮绑定的输入框
  const $targetInput = $($(this).data('target'));
  // 计算要切换的type值
  const targetType = $targetInput.attr('type') === 'password' ? 'text' : 'password';
  
  // 更新输入框type
  $targetInput.attr('type', targetType);
  // 同步更新按钮文字（可选，提升体验）
  $(this).text(targetType === 'text' ? '隐藏' : '显示');
});

备选：利用DOM相邻关系（无需data属性） #

如果你的按钮和输入框是直接相邻的兄弟元素（比如按钮紧跟在输入框后面），可以不用data-target，直接通过DOM关系定位：

$('.toggle-password').on('click', function() {
  const $targetInput = $(this).prev('input');
  const targetType = $targetInput.attr('type') === 'password' ? 'text' : 'password';
  
  $targetInput.attr('type', targetType);
  $(this).text(targetType === 'text' ? '隐藏' : '显示');
});

3. 进阶：支持动态生成的输入框 #

如果密码输入框是动态添加到页面的（比如通过AJAX加载），可以用事件委托来绑定事件，确保新生成的按钮也能生效：

$(document).on('click', '.toggle-password', function() {
  const $targetInput = $($(this).data('target'));
  const targetType = $targetInput.attr('type') === 'password' ? 'text' : 'password';
  
  $targetInput.attr('type', targetType);
  $(this).text(targetType === 'text' ? '隐藏' : '显示');
});

优化亮点 #

• 消除重复代码：所有切换按钮共用同一个处理函数，后续新增密码输入框只需添加对应类和关联关系，无需修改JS
• 逻辑清晰：通过显式关联或DOM关系明确按钮与输入框的对应关系，便于维护
• 可扩展性：事件委托版本支持动态元素，适配更复杂的页面场景

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