[英]Toggle field type attribute
I don't know what I am doing wrong here. 我不知道我在做什么错。 Scratching my head wondering why my function isn't working.
挠着头想知道为什么我的功能不起作用。 Pretty much trying to toggle "Show/Hide Password".
几乎试图切换“显示/隐藏密码”。
Currently, I am able to switch from password to text, but not able to switch back to password. 目前,我可以从密码切换为文本,但无法切换回密码。 Anything you see wrong?
您有看错吗?
HTML: HTML:
<div class="form-group mbs">
<label for="password" class="label-medium mbxs">Password</label><br>
<input type="password" name="password" class="form-control input-medium" required>
</div>
<div class="form-group mbs">
<label for="passwordConfirm" class="label-medium mbxs">Password Confirm</label><br>
<input type="password" name="passwordConfirm" class="form-control input-medium mbs" required><br>
<a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a>
<a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a>
</div>
Scripts: 脚本:
$("#show-password").click(function(e){
e.preventDefault();
if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password')){
$("input[name='password']").attr('type', 'text');
$("input[name='passwordConfirm']").attr('type', 'text');
}else{
$("input[name='password']").attr('type', 'password');
$("input[name='passwordConfirm']").attr('type', 'password');
}
}); });
You are assigning the attribute at if condition. 您在if条件下分配属性。 Change it like this,
像这样改变它
$("#show-password").click(function(e) {
e.preventDefault();
if ($("input[name='password']").attr('type') == 'password' && $("input[name='passwordConfirm']").attr('type') == 'password') {
$("input[name='password']").attr('type', 'text');
$("input[name='passwordConfirm']").attr('type', 'text');
} else {
$("input[name='password']").attr('type', 'password');
$("input[name='passwordConfirm']").attr('type', 'password');
}
});
if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password'))
will always return true. if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password'))
将始终返回true。
The way you are using .attr
will set the attribute instead of comparing it's type 您使用
.attr
的方式将设置属性,而不是比较其类型
$("#show-password").click(function(e){
e.preventDefault();
if($("input[name='password']").attr('type')=='password' && // Changed here
$("input[name='passwordConfirm']").attr('type')== 'password')
{
$("input[name='password']").attr('type', 'text');
$("input[name='passwordConfirm']").attr('type', 'text');
}else{
$("input[name='password']").attr('type', 'password');
$("input[name='passwordConfirm']").attr('type', 'password');
}
});
EDIT As pointed out by Anoop Joshi there is no difference between his & my answer. 编辑正如Anoop Joshi指出的,他和我的回答之间没有区别。 So modified a little , by using a common class between the two
input type = "password"
& used ternary operator to evaluate it 因此,通过在两个
input type = "password"
之间使用一个通用类并使用三元运算符对其进行了评估,进行了一些修改
HTML 的HTML
<div class="form-group mbs">
<label for="password" class="label-medium mbxs">Password</label><br>
// Used a common class passwordToggle
<input type="password" name="password" class="passwordToggle form-control input-medium" required>
</div>
<div class="form-group mbs">
<label for="passwordConfirm" class="label-medium mbxs ">Password Confirm</label><br>
// Used a common class passwordToggle
<input type="password" name="passwordConfirm" class="form-control input-medium mbs passwordToggle" required><br>
<a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a>
<a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a>
</div>
JS JS
$("#show-password").click(function(e){
e.preventDefault();
// Minimizing lines of code using ternary operator
$(".passwordToggle").attr('type') == 'password'? $(".passwordToggle").attr('type','text'):$(".passwordToggle").attr('type','password')
});
you need to use .attr('type')=='password'. 您需要使用.attr('type')=='password'。 instead of .attr('type', 'password') in condition.Try below code
而不是条件中的.attr('type','password')。请尝试以下代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.