кликабельный шрифт fa-heart-o не работает

#javascript #css #html

#javascript #css #HTML

Вопрос:

Приведенный ниже код создает сердце без заполнения, и оно должно заполняться щелчком пользователя, но у меня этот код не работает:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  font-size: 50px;
  cursor: pointer;
  user-select:none ;
}

.fa:hover {
  color: darkblue;
}
</style>
</head>
<body>

<p>Click on the icon to toggle between heart </p>

<i onclick="myFunction(this)" class="fa fa-heart-o"></i>

<script>
function myFunction(x) {
  x.classList.toggle("fa-heart");
}
</script>

</body>
</html>

Но если изменить

 <i onclick="myFunction(this)" class="fa fa-heart-o"></i>
...
x.classList.toggle("fa-heart");

к этому

 <i onclick="myFunction(this)" class="fa fa-heart"></i>
...
x.classList.toggle("fa-heart-o");

это сработало.
Я хочу показать сначала fa-heart-o , а после щелчка пользователя он заполнен и изменен на fa-heart

1. Поскольку технически вы переключаете два класса (fa-heart и fa-heart-o), возможно, вам захочется использовать оператор if вместо отдельного переключения

2. пожалуйста, сделайте демонстрационную скрипку

3. Какую версию шрифта Awesome вы используете? Начиная с текущей версии, в ней нет fa-heart-o класса, но перед полной / пустой версией стоит far или fas class. И, как упоминалось в других, toggleClass будет переключать класс, который вы передаете в качестве аргумента, вкл / выкл, если вы хотите переключаться между разными классами, вам понадобится либо оператор if-else, либо два toggleClass

4. с тем же результатом if-else версия шрифта awesome равна 4.

5. @Tofiq опубликуйте ваше заявление if-else

Ответ №1:

Переключение списка классов действительно предназначено для использования только при работе с одним классом. При переключении, если указанный класс существует, он будет удален, в противном случае он будет добавлен. В настоящее время у вашего элемента всегда будет fa-heart-o класс, и вы пытаетесь добавить fa-heart класс, чтобы переопределить его.

В FontAwesome fa-heart-o класс определяется после fa-heart класса. Поэтому fa-heart-o всегда будет переопределяться fa-heart , поскольку в противном случае они имеют одинаковую специфику. Смотрите статью о MDN для получения дополнительной информации.

В вашем случае вместо переключения одного класса вам нужно удалить один класс и добавить другой.

Ваш скрипт может выглядеть следующим образом:

 function myFunction(x) {
    if ( x.classList.contains( "fa-heart") ) {
        x.classList.remove( "fa-heart" );
        x.classList.add( "fa-heart-o" );
    }
    else {
        x.classList.remove( "fa-heart-o" );
        x.classList.add( "fa-heart" );
    }
}

1. спасибо, это именно то, что я хочу. Но один вопрос, почему мой код работал для (fa-heart для fa-heart-o), но наоборот не работает?

2. @Tofiq в таблице стилей FontAwesome fa-heart-o определяется после fa-heart , поэтому он переопределяет fa-heart определения. Например, когда вы начали с just, fa-heart а затем включили fa-heart-o , элемент будет иметь оба fa-heart и fa-heart-o классы. Поскольку fa-heart-o класс переопределяет fa-heart , вы получите открытое сердце. Когда вы начали с fa-heart-o и добавили fa-heart , казалось бы, ничего не изменилось, поскольку вы снова применили бы оба класса к одному и тому же элементу, и вновь добавленный fa-heart класс был бы переопределен исходным fa-heart-o классом.