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元素,上一个点击的元素颜色还原?
}
})();
1. Si cela peut être résolu avec CSS, JS n'est pas nécessaire. L'idée dela 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
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
.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.
Pourquoi pas css~
Vous pouvez utiliser les événements mouseenter et mouseout
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
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.
Pour tous ceux qui montent jusqu'à xx et descendent jusqu'à yy, pensez d'abord à utiliser la pseudo-classe hover de CSS
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 ~hover(function(){
},fonction(){
})