jQuery динамически изменять тип ввода

Question

Я хочу создать страницу изменения пароля. На этой странице у меня есть два входа, и я должен показать пароль при нажатии на значок. Как это сделать для двух входов? для одного входа работает нормально.

HTML:

<div class="password-type">
    <input 
        id="password" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="New Password"
        >
        <span class="far fa-eye show-password-eyes show-password"></span>
</div>

<div class="password-type">
    <input 
        id="password2" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="Confirm Password"
        >
        <span class="far fa-eye show-password-eyes show-password"></span>
</div>

IMG

jQuery:

$( document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $("#password");
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

Answer 1

Ваш ввод var всегда равен '#password', независимо от того, какой значок был нажат. Ваш ввод должен быть #password или # password2 в зависимости от того, какой значок был нажат. Мы можем сделать это с помощью селектора prev ().

$( document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $(this).prev('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

Answer 2

Вы можете решить эту проблему в два этапа:

1. Получить родителя текущего объекта щелчка с помощью $ (this) .parent ()
2. Искать в этом родителе поле ввода с помощью. найти ()

$(document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        // First get parent, then find the correct input within that parent.
        var input = $(this).parent().find('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="password-type">
    <input 
        id="password" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="New Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>

<div class="password-type">
    <input 
        id="password2" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="Confirm Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>