Не удается изменить значок Font Awesome по щелчку?

#javascript #html #css #font-awesome

#javascript #HTML #css #шрифт -awesome

Вопрос:

Я пытаюсь изменить значок font awesome с помощью переключателя, однако, похоже, ничего не работает, и я не уверен, почему?

(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');
    });
});

Любая помощь будет принята с благодарностью!

1. Почему в вашем JS вы используете far class 3 раза?

2. О, прошу прощения, это опечатка в вопросе — я отредактировал его сейчас (проблема все еще сохраняется)

3. Попробуйте это $(‘i’).toggleClass(‘fa-eye fa-eye-косая черта’)

4. @StevenPss к сожалению, по-прежнему не повезло

Ответ №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’)

Ответ №2:

Попробуйте это

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

1. Все еще не работает, посмотрите на мой awnser, вы также пытаетесь получить объект с помощью $ (‘change-icon’) вместо того, чтобы получать его по классу с помощью $ (‘.change-icon’) пожалуйста, посмотрите документацию jquery

2. Вы правы @LorenzoOtto, я сосредоточился на разделе toggleClass и скопировал / вставил из его кода. Сейчас я отредактирую свой ответ. Спасибо, что указали на это

Ответ №3:

Попробуй это, братан

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