#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, либо два toggleClass4. с тем же результатом 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
классом.