javascript - Veuillez m'apprendre le code natif JS pour changer la couleur d'un élément lorsque vous déplacez la souris dessus et le restaurer lorsque vous l'éloignez.

Question

J'ai appris les événements bouillonnants, tapé le code et apporté de petites modifications aux détails en fonction des articles en ligne. J'ai une question :

.

1. Le but ultime est de changer la couleur lorsque la souris monte. Comment y parvenir ?
2. Comment résoudre le problème selon lequel lorsque l'on clique sur l'élément li suivant, la couleur de l'élément précédemment cliqué est restaurée ?
S'il vous plaît, dites-moi vos idées et les méthodes que vous utiliserez. J'écrirai le reste moi-même. Je veux mettre en pratique mes compétences en codage. Merci !
PS : C'est facile de lire un livre, mais c'est déroutant d'écrire du code tout seul, hé !

Le code HTML est le suivant :

<ul id="color">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Code JS :

 (function () {
        var color_list = document.getElementById('color');
        color_list.addEventListener('click',changeColor);
        function changeColor(e) {
            var x = e.target;
            if(x.nodeName.toLowerCase() === 'li')
                x.style.backgroundColor = 'red';
//    最终目的要实现鼠标移动上去就变色？
//    另外，如何解决点击下一个li元素，上一个点击的元素颜色还原？
        }
    })();

Answer 1

1. Si cela peut être résolu avec CSS, JS n'est pas nécessaire. L'idée de​​la question est : le survol d'une pseudo-classe peut résoudre ce problème.
2, mais votre code est un événement de clic.. C'est un peu faux. Eh bien, puisque j'ai écrit un proxy d'événement, j'en écrirai un plus bas et j'exploiterai directement le li quand il n'y aura pas beaucoup de li

.

        (function(){
            var color_list = document.getElementById('color');
              var lis = color_list.getElementsByTagName("li");

            for(var i = 0;i<lis.length;i++){
                lis[i].onclick = function(){
                    for(var i = 0;i<lis.length;i++){
                        lis[i].style.color = "";
                    }
                    this.style.color = "red";
                }
            }
        })(); 

Connaissez-vous la fermeture ? Afin de ne pas polluer les variables globales et d'utiliser des fermetures, la première façon de l'écrire est d'effacer directement la couleur de tous les li et d'ajouter de la couleur au li actuellement cliqué.

Pour la deuxième façon d'écrire, je l'ai écrit directement à l'intérieur, je n'écrirai plus le même code pour l'acquisition et la fermeture des éléments à l'extérieur

.

            var last = 0;
            for(var i = 0;i<lis.length;i++){
                lis[i].index = i;
                lis[i].onclick = function(){
                    lis[last].style.color = "";
                    lis[this.index].style.color = "red";
                    last = this.index;
                }
            }

La deuxième méthode consiste à effacer la précédente et à ajouter de la couleur au li actuel. En comparaison, les performances de la deuxième méthode sont légèrement meilleures et la première méthode est plus simple à comprendre.

ps : Cependant, je recommande toujours la méthode d'écriture de proxy d'événement.

Answer 2

1. Pourquoi pas css~

2. Vous pouvez utiliser les événements mouseenter et mouseout

Answer 3

Pour changer la couleur lorsque la souris est déplacée vers le haut, vous devez principalement utiliser du CSS, et la pseudo class:hover peut être effectuée.
Si vous cliquez dessus, deux idées sont proposées. 1. Restaurez la couleur de tous les li sous ul et changez e.target en rouge.
2. Cliquez pour enregistrer la cible précédente, cliquez pour restaurer la couleur de la cible précédente, et la cible actuelle devient rouge

Answer 4

Déplacez la souris vers le haut pour changer la couleur. Pourquoi ne pas utiliser l'événement de survol ? Vous pouvez rechercher le survol.

Answer 5

1. Pour tous ceux qui montent jusqu'à xx et descendent jusqu'à yy, pensez d'abord à utiliser la pseudo-classe hover de CSS

;

2. Vous enregistrez vos attributs par défaut dans un nom de classe et enregistrez les attributs modifiés dans un autre nom de classe. Lors du rappel par clic, $(this)supprimez la classe par défaut et ajoutez la classe de changement, puis parcourez ses éléments frères pour trouver la classe de changement. , après l'avoir trouvé, supprimez la classe de changement et ajoutez la classe par défaut, ça devrait aller ~

Answer 6

<style>
    #color > li:hover {
      color: red;
    }
</style>

    (function () {
      var color_list = document.getElementById('color');
      color_list.addEventListener('click', changeColor);

      function changeColor(e) {
        var x = e.target,
          liarr = e.target.parentElement.children,
          i, l = liarr.length;
        if (x.nodeName.toLowerCase() === 'li') {
          // 解决点击下一个li元素，上一个点击的元素颜色还原。
          for (i = 0; i < l; i++) {
            liarr[i].style.backgroundColor = null;
          };
          x.style.backgroundColor = 'red';
        }
      }
    })();

Answer 7

hover(function(){

这里执行鼠标移入
用.eq($(this).index()) //找到你鼠标移入的那一个li

},fonction(){

这里执行移出的
直接一行代码把所有li的颜色初始化

})