JavaScript：保留中のパスワードを表示

Question

パスワード用に2つの入力があります。各入力フィールドには「表示」ボタンがあり、そのボタンを押したままのパスワードが表示されます。 'ショー' ボタンに私をクリックすると

<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'); 
}); 

を持っているものの問題

、両方の入力フィールドが表示されています。対応するパスワードだけが表示されるようにするにはどうすればよいですか？

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

ただ、与えられたクラスに代わり、すべての入力の前の入力をターゲット

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

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