Exemple d'analyse de la façon dont CSS utilise l'identifiant et la classe pour contrôler les styles d'éléments

Il existe maintenant un exemple d'exigence :

1) Dessinez cinq cases, représentées par les couleurs de police rouge, violet, orange, vert et bleu

2) Cliquez avec la souris sur l'une d'elles ; d'entre eux Lorsqu'il s'agit d'une boîte, la bordure est en gras et affiche la même couleur que la couleur de la police de la boîte

L'effet est le suivant :

(Image 1) Rendu de la boîte

Voici l'idée spécifique de mise en œuvre :

1. Construction de contenu HTML

Tout d'abord, utilisez le contenu html pour exprimer le contenu des cinq cases. Le code est le suivant :

<ul id=&#39;levelGroup&#39;>

    <li id=&#39;level1&#39; >红</li>
    <li id=&#39;level2&#39; >紫</li>
    <li id=&#39;level3&#39; >橙</li>
    <li id=&#39;level4&#39; >绿</li>
    <li id=&#39;level5&#39; >蓝</li>

 </ul>

2. Implémentation du style original

Utilisez CSS pour exprimer les exigences de style du. exigence ci-dessus 1. Le code CSS est le suivant :

body{
  
  font-size: 10px;

}

#levelGroup{

	list-style: none;
	border: 1px solid gray;
	height: 40px;
	width: 200px;
	overflow: hidden;
	padding: 10px;

}

#level1{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: red;
	margin-right: 5px;
	text-align: center;
	padding-top: 5px;
}


#level2{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: purple;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

#level3{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: orange;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level4{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: green;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level5{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: blue;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

Jusqu'à présent, vous pouvez compléter l'effet de la figure 1.

3. Implémentation du style interactif

Ensuite, en analysant l'exigence 2, nous avons constaté que tant que chaque élément li est cliqué, l'élément reçoit un gras filaire Et le style changeant de couleur peut être réalisé. Alors comment ajouter un style ? Habituellement, notre approche consiste à ajouter un attribut de classe à chaque li et à définir le style CSS de la classe (bordure grasse, changement de couleur), le code CSS spécifique est le suivant :

.level1_selected{

  border: 2px solid red !important;

}

.level2_selected{

	border: 2px solid purple !important;
}
.level3_selected{

	border: 2px solid orange !important;
}
.level4_selected{

	border: 2px solid green !important;
}
.level5_selected{

	border: 2px solid blue !important;
}

Ensuite, le code permettant d'utiliser js pour contrôler le style interactif est le suivant :

$("#levelGroup li").click(function()
   
      //首先获取该元素的索引
      var index = $(this).index();


      //接着为该li添加相应的css交互样式
       var para_index = index+1;
       $(this).addClass("level"+para_index+"_selected");


     //同时也要将其他li元素的样式还原为初始状态
     $("#levelGroup li").each(function(){
        var curIndex = $(this).index();
        if(curIndex !=index){
             
             curIndex = curIndex+1;
             $(this).removeClass("level"+curIndex+"_selected");


       }

    });

});

L'effet final est illustré dans la figure 2 :

Figure (2) L'interaction rend une optimisation

Question :

En observant l'implémentation du code ci-dessus, les lecteurs peuvent rapidement découvrir un problème :

Le code en js est difficile à utiliser et doit être parcouru, et l'efficacité globale est faible. Analyse :

Alors comment améliorer et optimiser ? Grâce à l'analyse, nous avons découvert que la raison pour laquelle le code dans js est compliqué est que le style original de l'exigence 1 de chaque élément li est contrôlé par id, tel que #level1{......}, tandis que le style interactif de l'exigence 2 est contrôlée par l'attribut de classe, tel que .level1_selected{......}, et le style original et le style interactif de chaque élément li sont différents, donc le positionnement et le parcours de l'index doivent être effectués pour changer le style pendant l'interaction .

Solution :

Puisqu'il s'agit d'un problème avec la méthode de paramétrage du style CSS, comment concevoir les changements

En fait, on peut suivre ce concept ici : ajouter le moins de nouveaux contrôles possible ? classe possible pour réduire les opérations js ultérieures. Par exemple, la méthode ci-dessus consiste à ajouter une "classe sélectionnée" à chaque li dans la solution à l'exigence 2, telle que la classe level1_selected, la classe level2_selected.... La solution idéale ici est d'ajouter une seule classe sélectionnée, mais la classe sélectionnée doit être utilisée conjointement avec l'identifiant de chaque li pour garantir que chaque classe sélectionnée a un style différent. Peut-être que certains élèves ne comprennent pas grand chose ici, ce n'est pas grave ! Regardez simplement le code ci-dessous. Repenser l'interaction de l'exigence 2 (sélectionnée)

Ensuite, nous pouvons voir comment le code en js est modifié. Les lecteurs peuvent également le modifier selon moi. classe de style, écrivez d'abord le code d'opération js. Est-ce le même que ce que j'ai écrit ci-dessous ?

#level1.selected{

	border: 2px solid red;

}

#level2.selected{

	border: 2px solid purple;
}
#level3.selected{

	border: 2px solid orange;
}
#level4.selected{

	border: 2px solid green;
}
#level5.selected{

	border: 2px solid blue;
}

Après avoir lu le code, vous sentez-vous aussi heureux que moi ? Après tout, le simple fait de changer la façon d'ajouter des classes en CSS peut rendre le code js suivant si concis ! Une conclusion tirée ici est donc (déjà mentionnée ci-dessus) :

$("#levelGroup li").click(function(){
   
      $(this).addClass("selected").siblings().removeClass("selected");

});

Ajoutez le moins de nouvelles classes de contrôle possible pour réduire les opérations js ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!