帶顯示/隱藏按鈕的多個密碼字段

Question

我有幾個密碼輸入，但想通過圖標（按鈕）爲每個密碼輸入切換密碼。但是，以下內容會切換，並且只會將圖標放在第一個圖標上。

這裏有一個小提琴： https://jsfiddle.net/bu6ysgsj/

 
    $(function() { 
 
     $('.password-group').find('.password-box').each(function(index, input) { 
 
      var $input = $(input); 
 
      $('.password-visibility').click(function() { 
 
       var change = ""; 
 
       if ($(this).find('i').hasClass('fa-eye')) { 
 
        $(this).find('i').removeClass('fa-eye') 
 
        $(this).find('i').addClass('fa-eye-slash') 
 
        change = "text"; 
 
       } else { 
 
        $(this).find('i').removeClass('fa-eye-slash') 
 
        $(this).find('i').addClass('fa-eye') 
 
        change = "password"; 
 
       } 
 
       var rep = $("<input type='" + change + "' />") 
 
        .attr('id', $input.attr('id')) 
 
        .attr('name', $input.attr('name')) 
 
        .attr('class', $input.attr('class')) 
 
        .val($input.val()) 
 
        .insertBefore($input); 
 
       $input.remove(); 
 
       $input = rep; 
 
      }).insertAfter($input); 
 
     }); 
 
    });

.password-group { 
 
    position: relative; 
 
    width: 300px; 
 
} 
 

 
.password-group > input { 
 
    width: 100%; 
 
} 
 

 
.password-visibility { 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 2px; 
 
} 
 

<div class="password-group"> 
 
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98"> 
 
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a> 
 
</div> 
 
<div class="password-group"> 
 
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98"> 
 
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a> 
 
</div> 
 
<div class="password-group"> 
 
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98"> 
 
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a> 
 
</div> 
 
<div class="password-group"> 
 
    <input type="password" class="form-control password-box" aria-label="password" value="wdocechoiwceh98"> 
 
    <a href="#!" class="password-visibility"><i class="fa fa-eye"></i></a> 
 
</div> 
 

Answer 1

您單擊處理器選擇的範圍太廣。

變化

$('.password-visibility').click(function() { ... }) 

到

$input.parent().find('.password-visibility').click(function() { ... }) 

的jsfiddle演示：https://jsfiddle.net/bu6ysgsj/1/