單擊時無法更改 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

您的問題是您嘗試獲取 html 元素 .change-icon 但您嘗試使用 $('change-icon') 而不是 $('.change-icon') 來獲取它，其中點表示它是一個班級

改變這個：

$(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 2

嘗試這個

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

Answer 3

試試這個兄弟

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