单击时无法更改 Font Awesome 图标？

Question

我正在尝试使用切换按钮更改超棒的字体图标，但是，似乎没有任何效果，我不确定为什么？

(HTML)

<span class="change-icon"><i class="far fa-eye" id="password-see"></i></span></div>

(CSS)

.change-icon {
    cursor: pointer;
}

(Javascript)

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

如有任何帮助，我们将不胜感激！

Answer 1

试试这个

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

Answer 2

您的问题是您尝试获取 html 元素 .change-icon 但您尝试使用 $('change-icon') 而不是 $('.change-icon') 其中点表示它是 class

改变这个：

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

为此：

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

我会将 $('i') 更改为 $('#password-see')

Answer 3

试试这个兄弟

 $(document).ready(function () {
        $('.change-icon').click(function (event) {
            $(event).find('i').toggleClass('far fa-eye far fa-eye-slash');
        });
    });

单击时无法更改 Font Awesome 图标？

Can't change Font Awesome icon on click?

html

javascript

css

font-awesome