Как управлять иконками с JavaScript - PullRequest
Новая
       16

Как управлять иконками с JavaScript

0 голосов
/ 06 апреля 2020

Я застрял в этой проблеме. Я хочу, чтобы мой шрифт управлял удивительными значками и нажимал javascript, я хочу показать другой значок, когда пользователь наводит курсор на значок и когда пользователь покидает значок, предыдущий значок возвращается. когда пользователь щелкает значок, появляется новый значок, а когда пользователь покидает мышь, предыдущий значок не возвращается, а когда пользователь снова нажимает значок, предыдущий значок возвращается.

Вот мой Html: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://kit.fontawesome.com/471cefd7e0.js" crossorigin="anonymous"></script>




    <title>Hello, world!</title>
  </head>
  <body>
                           <span class="select-me">
                            <i class="far fa-heart wishlist-item"></i>
                            <i class="fas fa-heart wishlist-item2"></i>
                          </span>
                           <span class="select-me">
                            <i class="far fa-heart wishlist-item"></i>
                            <i class="fas fa-heart wishlist-item2"></i>
                          </span>
                           <span class="select-me">
                            <i class="far fa-heart wishlist-item"></i>
                            <i class="fas fa-heart wishlist-item2"></i>
                          </span>



  </body>
</html>

Css Код: 

.wishlist-item {
            color: red;
            font-size: 2.5rem;
         }
.select-me .wishlist-item2 {
            display: none;
            color: red;
            font-size: 2.5rem;
          }

Js Код: 

    var checkIt = true;
var node = document.querySelectorAll('.wishlist-item')
var node2 = document.querySelectorAll('.wishlist-item2')
var wishlistItems =  Array.prototype.slice.call(node);
var wishlistItems2 = Array.prototype.slice.call(node2);
for(var i = 0; i < wishlistItems.length; i++) {

wishlistItems[i].addEventListener('mouseenter', function(){

    this.style.display = "none"
    wishlistItems2[( wishlistItems.indexOf( this ) )].style.display = "block"
})
}
for(var i = 0; i < wishlistItems2.length; i++) {

    wishlistItems2[i].addEventListener('mouseleave', function(){

    if (checkIt === true){
        this.style.display = "none"
        wishlistItems[( wishlistItems2.indexOf( this ) )].style.display = "block";

    }


})
}
for (var i = 0; i < wishlistItems2.length; i++) {
    wishlistItems2[i].addEventListener('click', function(){



        this.style.display = "block";
        wishlistItems[( wishlistItems2.indexOf( this ) )].style.display = "none";
        checkIt = false;


    })
}

Ссылка для jsfiddle: jsfiddle

1 Ответ

1 голос
/ 06 апреля 2020

Ваша главная проблема в том, как вы определяете, над чем размышляете. Вы выбираете элемент span, но затем пытаетесь что-то изменить в элементе i, который является дочерним. Измените ваш скрипт на тот, что ниже, и он будет работать. Кроме того, если вы не хотите, чтобы значки перемещались, когда они наведены, добавьте float: left; в оба css класса. (Также я предполагаю, что вы вызываете файлы CSS и JS из файла HTML.) 

var checkIt = true
var select = document.querySelectorAll('.select-me')
var wishlistItems = document.querySelectorAll('.wishlist-item')
var wishlistItems2 = document.querySelectorAll('.wishlist-item2')
for(var i = 0; i < select.length; i++) {
    var add = i
select[i].addEventListener('mouseenter', function(){

    this.children[0].style.display = "none";
    this.children[1].style.display = "block"
    console.log("mouseenter");
})
}
for(var i = 0; i < select.length; i++) {

select[i].addEventListener('mouseleave', function(){

    if(checkIt === true) {
        this.children[0].style.display = "block"
        this.children[1].style.display = "none";
    }
console.log("mouse leave");
})
}

for (var i = 0; i < select.length; i++) {
select[i].addEventListener('click', function(){
    if(checkIt === true) {
    checkIt = false;
    }
    else {
        checkIt = true;
    }
    console.log("mouseclick");

    })
}
...