Question

我有2个密码输入。每个输入字段都显示＆＃39;按钮，显示按住该按钮的密码。

<form name="resetting_form" method="post" action="">
    <div class="form-group has-feedback">
        <input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
        <span class="show">show</span>
    </div>
    <div class="form-group has-feedback">
        <input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
        <span class="show">show</span>
    </div>  
    <input type="submit" class="btn btn-primary" value="Submit">
</form>

这就是我所拥有的

$(".form-control").on("keyup",function(){
    if ($(this).val())
        $(".show").show();
    else
        $(".show").hide();
});

$(".show").mousedown(function(){
    $(".form-control").attr('type','text');
}).mouseup(function(){
    $(".form-control").attr('type','password');
}).mouseout(function(){
    $(".form-control").attr('type','password');
});

问题

当我点击“显示＆＃39;按钮，显示两个输入字段。如何确保只显示相应的密码？

Answer 1

使用$(".form-control")时，jquery选择所有.form-control元素。但您需要在事件函数中使用this变量选择目标元素，并使用.prev()选择上一个元素。

$(".show").mousedown(function(){
    $(this).prev().attr('type','text');
}).mouseup(function(){
    $(this).prev().attr('type','password');
}).mouseout(function(){
    $(this).prev().attr('type','password');
});

Answer 2

只需定位上一个输入，而不是使用给定类

的所有输入

＆＃13;

 $(".form-control").on("keyup", function() {
   if ($(this).val())
     $(this).next(".show").show();
   else
     $(this).next(".show").hide();
 }).trigger('keyup');

 $(".show").mousedown(function() {
   $(this).prev(".form-control").prop('type', 'text');
 }).mouseup(function() {
   $(this).prev(".form-control").prop('type', 'password');
 }).mouseout(function() {
   $(this).prev(".form-control").prop('type', 'password');
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="resetting_form" method="post" action="">
  <div class="form-group has-feedback">
    <input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
    <span class="show">show</span>
  </div>
  <div class="form-group has-feedback">
    <input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
    <span class="show">show</span>
  </div>

  <input type="submit" class="btn btn-primary" value="Submit">
</form>

＆＃13;

JavaScript：显示密码保留

2 个答案: