jQuery显示/隐藏密码 [英] Jquery show/hide password
本文介绍了jQuery显示/隐藏密码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面的Jquery工作正常,但是如何缩短此Jquery?我必须显示和隐藏用于输入密码和确认密码的密码吗? https://jsfiddle.net/c5cvLo54/1/
Below Jquery is working fine but How could I shorten this Jquery? I have to show and hide the password for password and confirmed password? 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();
});
推荐答案
以下是缩短代码的一种方法:
Here is one-of-the ways, how you can shorten your code:
$(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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="password" name="password" id="password" />
<span class="password-showhide">
<span class="show-password">Show</span>
<span class="hide-password">hide</span>
</span>
<li>
<li>
<input type="password" name="password" id="confirmPassword" />
<span class="confirm-password-showhide">
<span class="show-password">Show</span>
<span class="hide-password">hide</span>
</span>
<li>
</ul>
这篇关于jQuery显示/隐藏密码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文