кликабельный fa-heart-o fontawsome не работает - PullRequest
Новая
       1

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

0 голосов
/ 25 марта 2019

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

<!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 Ответ

1 голос
/ 26 марта 2019

Переключение ClassList действительно предназначено для использования только при работе с одним классом.При переключении, если указанный класс существует, он будет удален, в противном случае он будет добавлен.В настоящее время ваш элемент всегда будет иметь класс 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" );
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...