Error in toggle password visibility eye,Uncaught ReferenceError: Invalid left-hand side in assignment in code

Question

我写了这个切换密码的代码，但是我有错误： html:

<!--Hide/Show password-->
<button class="form-password__visibility" type="button" 
                       onclick="$('#inputPassword').attr('type') = $('#inputPassword').attr('type') == 'password' ? 'text' : 'password'">
<i class="vi vi-eye-off"></i>
</button>

脚本：

 $(":input[type=password]").click, function (e) {
        const input = $(this).closest('input');
        input.attr('type') == 'password' ? 'text' : 'password';

        if (input.attr('type') == 'password') {
            $(this).children("i").removeClass("vi-eye-off").addClass("vi-eye");
        }
        else {
            $(this).children("i").removeClass("vi-eye").addClass("vi-eye-off");
        }`
`
    };

错误： 我在 html 中遇到此行的错误" onclick="$('#inputPassword').attr('type') = $('#inputPassword').attr('type') " --->“未捕获的 ReferenceError：分配中的左侧无效”

Answer 1

这里需要考虑很多事情

您可以使用内联 onclick 或 click 处理程序
$(this).closest('input') 表示您在输入中有一个元素，它完全错误
$(":input[type=password]").click, 应该是 $(selector).on('click' , function 或 $(selector).click(function...
通过使用 $(":input[type=password]")，您正在使用 click 到 input，您应该将它用于 button
你的 html 结构应该是一个包含 input 和 button 的元素然后使用 .closest().find() 到 select input
要设置您需要使用 $(selector).attr('attribute name' , 'value') 的属性，这意味着 input.attr('type') == 'password' ? 'text' : 'password'; 根本不起作用。正确的是 input.attr('type' , input.attr('type') == 'password' ? 'text' : 'password')

最后，你的代码应该是这样的

$(".form-password__visibility").on('click', function (e) {
    const input = $(this).closest('.form-password').find('input');
    input.attr('type' , input.attr('type') == 'password' ? 'text' : 'password');

    if (input.attr('type') == 'password') {
        $('i' , this).removeClass("vi-eye-off").addClass("vi-eye");
    }
    else {
        $('i' , this).removeClass("vi-eye").addClass("vi-eye-off");
    }`
`
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-password">
  <input type="password"/>
  <!--Hide/Show password-->
  <button class="form-password__visibility" type="button">
  <i class="vi vi-eye-off"></i>
  </button>
</div>

Error in toggle password visibility eye,Uncaught ReferenceError: Invalid left-hand side in assignment in code

Error in toggle password visibility eye,Uncaught ReferenceError: Invalid left-hand side in assignment in code

html

javascript

passwords

jquery

toggle