Jquery显示/隐藏密码

Jquery下面工作正常，但我怎样才能缩短这个Jquery？ 我必须显示和隐藏密码和确认密码的密码？ https://jsfiddle.net/c5cvLo54/1/

$(".password-showhide .show-password").click(function() { $("#password").attr("type", "text"); $(".password-showhide .show-password").hide(); $(".password-showhide .hide-password").show(); }); $(".password-showhide .hide-password").click(function() { $("#password").attr("type", "password"); $(".password-showhide .hide-password").hide(); $(".password-showhide .show-password").show(); }); $(".confirm-password-showhide .show-password").click(function() { $("#confirmPassword").attr("type", "text"); $(".confirm-password-showhide .show-password").hide(); $(".confirm-password-showhide .hide-password").show(); }); $(".confirm-password-showhide .hide-password").click(function() { $("#confirmPassword").attr("type", "password"); $(".confirm-password-showhide .hide-password").hide(); $(".confirm-password-showhide .show-password").show(); }); 

Answer 1

这是一种方法，如何缩短代码：

 $(document).ready(function() { $(".show-password, .hide-password").on('click', function() { var passwordId = $(this).parents('li:first').find('input').attr('id'); if ($(this).hasClass('show-password')) { $("#" + passwordId).attr("type", "text"); $(this).parent().find(".show-password").hide(); $(this).parent().find(".hide-password").show(); } else { $("#" + passwordId).attr("type", "password"); $(this).parent().find(".hide-password").hide(); $(this).parent().find(".show-password").show(); } }); }); 

 li { list-style: none } .hide-password { display: none } 

  
 
   Show hide  
 
   Show hide  
  

Answer 2

你只能用一个按钮来控制。

• JS：

“`

 $('.showOrHide').click(function(e){ var target = e.currentTarget $(target).hasClass('show')?hidePassword($(target)):showPassword($(target)) }) function hidePassword(e){ e.removeClass('show').addClass('hide') e.prev('input').attr('type','password') } function showPassword(e){ e.removeClass('hide').addClass('show') e.prev('input').attr('type','text') } 

HTML：

“`

  click 

“`

样式：

“`

 .show{ /*css you want */ color: blue } .hide{ /*css you want */ color: red } 

“`

Answer 3

这是我认为你能得到的最短的

 $(".confirm-password-showhide .trigger-password, .password-showhide .trigger-password").click(function() { var c = $(this).parent().attr("class").replace("-showhide", ""); var obj = $("#" + (c.indexOf("confirm") > -1 ? "confirmPassword" : "password")); obj.attr("type", obj.attr("type") == "text" ? "password" : "text"); $(this).text($(this).text() == "hide" ? "show" : "hide"); }); 

我还删除了每个密码的“隐藏”范围。

 $(".confirm-password-showhide .trigger-password, .password-showhide .trigger-password").click(function() { var c = $(this).parent().attr("class").replace("-showhide", ""); var obj = $("#" + (c.indexOf("confirm") > -1 ? "confirmPassword" : "password")); obj.attr("type", obj.attr("type") == "text" ? "password" : "text"); $(this).text($(this).text() == "hide" ? "show" : "hide"); }); 

  
 
 Show 
 
 Show 
  

Answer 4

显示/隐藏密码function

 function togglePassword($element){ var newtype=$element.prop('type')=='password'?'text':'password'; $element.prop('type',newtype); } $(document).ready(function() { $('#showUserNewPass').change(function(){ togglePassword($('#userNewPass')); togglePassword($('#confirmNewPassword')); }); });