Блог

Почему изменение значений атрибутов элементов в vanilla JS и jQuery иногда не работает одинаково? Один из сценариев — это эксперимент, который я создал, где всякий раз, когда нажимается кнопка «Показать пароль» type , значение атрибута поля пароля должно меняться на text когда оно есть password , и наоборот. Он успешно работал в vanilla JS, но не в jQuery. В jQuery значение атрибута изменяется на text , но когда я хочу изменить его обратно на password , это не сработает. Почему возникает такая проблема?

Ванильный JS

 document.querySelector('.show-password').onclick = function() {
    if(document.querySelector('#password').type == 'password') {
        document.querySelector('#password').type = 'text';
    } else {
        document.querySelector('#password').type = 'password';
    }
}
  

jQuery

 $('.show-password').click(function() {
    if($('#password').attr('type', 'password')) {
        $('#password').attr('type', 'text');
    } else {
        $('#password').attr('type', 'password');
    }
});
  

Потому if($('#password').attr('type', 'password')) что не спрашивает, является ли атрибут типа «паролем». Это установка type=password и возврат объекта jQuery в оператор if .

Когда .attr() используется только с одним параметром, он получает этот атрибут из выбранного элемента, поэтому вы можете сделать это с помощью $("#password").attr("type") == "password" .