Question

我不知道我在这里做错了什么。抓我的脑袋，想知道为什么我的功能不起作用。几乎试图切换＆＃34;显示/隐藏密码＆＃34;。

目前，我可以从密码切换到文本，但无法切换回密码。你看错了什么？

HTML：

$("#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');
}

脚本：

public abstract class RequestModelBase {
    //All the properties that are common to your models
}

}）;

Answer 1

您正在if条件下分配属性。像这样改变，

$("#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');
  }
});

Fiddle

if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password'))将始终返回true。

Answer 2

您使用.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');
}
});

Working jsfiddle

修改正如Anoop Joshi指出的那样，他和他之间没有区别。我的答案。通过使用两个input type = "password"＆amp;之间的公共类，进行了一点修改。使用三元运算符进行评估

<强> 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

$("#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') });

jsfiddle using ternary operator

Answer 3

你需要使用.attr（'type'）=='password'。在条件中代替.attr（'type'，'password'）。尝试下面的代码

$（“＃show-password”）。click（function（e）{e.preventDefault（）; if（$（“input [name ='password']”）。attr（'type'）=='password' ＆amp;＆amp; $（“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'）;}}）;

切换字段类型属性

3 个答案: