简化javascript密码显示/隐藏功能答案

【问题标题】：Simplify javascript password show/hide function简化javascript密码显示/隐藏功能
【发布时间】：2022-10-23 18:04:42
【问题描述】：

我有 3 个不同的密码输入：

   --Current Password Input
   <input asp-for="ChangePassword.OldPassword" class="form-control" id="currentPassword"   required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleCurrentPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>

   --New password input
   <input asp-for="ChangePassword.NewPassword" class="form-control" id="newPassword" required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleNewPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>
    
   --Confirm password input
   <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword" class="form-control" required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleConfirmPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>

如您所见，每个按钮都有一个按钮，当用户单击时，我删除类型密码，如果用户再次单击，我再次添加它。

我的脚本来做到这一点：

    $('#toggleCurrentPassword').click(function() {
      if ($('#currentPassword').attr('type') === "password") {
        $('#currentPassword').attr('type', 'text');
      } else {
        $('#currentPassword').attr('type', 'password');
      }
    })

  $('#toggleNewPassword').click(function() {
    if ($('#newPassword').attr('type') === "password") {
      $('#newPassword').attr('type', 'text');
    } else {
      $('#newPassword').attr('type', 'password');
    }
  })

  $('#toggleConfirmPassword').click(function() {
      if ($('#confirmPassword').attr('type') === "password") {
        $('#confirmPassword').attr('type', 'text');
      } else {
        $('#confirmPassword').attr('type', 'password');
      }
    })

它正在工作，但我认为这应该是一种更好的方法，函数中有很多重复的代码。我怎样才能在这里做得更好？问候

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以创建一个函数来处理每个 eventListener：

function passwordToggle(button, input) {
  $(button).click(function() {
    if ($(input).attr('type') === "password") {
      $(input).attr('type', 'text');
    } else {
      $(input).attr('type', 'password');
    }
  })
}

passwordToggle('#toggleCurrentPassword', '#currentPassword');
passwordToggle('#toggleNewPassword', '#newPassword');
passwordToggle('#toggleConfirmPassword', '#confirmPassword');

【讨论】：

【解决方案2】：

在我看来，你可以简单地创建一个可重用的函数，我认为。

例子：

 --Current Password Input
 <br>
   <input asp-for="ChangePassword.OldPassword" class="form-control" id="currentPassword"   required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleCurrentPassword" data-input-id="#currentPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
<br>
   --New password input
<br>
   <input asp-for="ChangePassword.NewPassword" class="form-control" id="newPassword" required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleNewPassword" data-input-id="#newPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
    <br>
   --Confirm password input
   <br>
   <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword" class="form-control" required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleConfirmPassword" data-input-id="#confirmPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
  $(".btn-password-toggle").on("click", function() {  
    let inputId = $(this).attr("data-input-id");
    let curType = $(inputId).attr("type") === "password" ? "text" : "password";
    $(inputId).attr("type", curType);
  })
</script>

【讨论】：