Beispielanalyse, wie CSS ID und Klasse verwendet, um Elementstile zu steuern

Nun gibt es eine solche Beispielanforderung:

1) Zeichnen Sie fünf Kästchen, dargestellt durch die Schriftfarben Rot, Lila, Orange, Grün und Blau

2) Klicken Sie mit der Maus auf eines davon: Wenn es sich um ein Kästchen handelt, ist der Rand fett und zeigt dieselbe Farbe wie die Schriftfarbe des Kästchens an.

Der Effekt ist wie folgt:

(Bild 1) Box-Rendering

Das Folgende ist die spezifische Implementierungsidee:

1. HTML-Inhaltskonstruktion

Verwenden Sie zunächst HTML-Inhalte Um den Inhalt der fünf Felder auszudrücken, lautet der Code wie folgt:

<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. Ursprüngliche Stilimplementierung

Verwenden Sie CSS, um die Stilanforderungen auszudrücken obige Anforderung 1. Der CSS-Code lautet wie folgt:

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;

}

Bisher können Sie den Effekt von Abbildung 1 vervollständigen.

3. Implementierung des interaktiven Stils

Als Nächstes haben wir bei der Analyse von Anforderung 2 festgestellt, dass das Element ein Drahtmodell in Fettschrift erhält, solange auf jedes li-Element geklickt wird Und der Farbwechselstil kann realisiert werden. Wie füge ich also einen Stil hinzu? Normalerweise besteht unser Ansatz darin, jedem Li ein Klassenattribut hinzuzufügen und den CSS-Stil der Klasse festzulegen (Rahmen fett, Farbänderung). Der spezifische CSS-Code lautet wie folgt:

.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;
}

Als nächstes lautet der Code für die Verwendung von js zur Steuerung des interaktiven Stils wie folgt:

$("#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");


       }

    });

});

Der endgültige Effekt ist in Abbildung 2 dargestellt:

Abbildung (2) Interaktion rendert eine Optimierung

Frage:

Durch die Beobachtung der Implementierung des obigen Codes können Leser schnell ein Problem entdecken:

Der Code in js ist umständlich zu bedienen und muss durchlaufen werden, und die Gesamteffizienz ist gering. Analyse:

Wie kann man also verbessern und optimieren? Durch die Analyse haben wir herausgefunden, dass der Grund für die Komplexität des Codes in js darin liegt, dass der ursprüngliche Stil von Anforderung 1 jedes li-Elements durch die ID gesteuert wird, z. B. #level1{......}, während der interaktive Stil von Anforderung 2 wird durch das Klassenattribut gesteuert, z. B. .level1_selected{......}, und der ursprüngliche Stil und der interaktive Stil jedes li-Elements sind unterschiedlich, sodass eine Indexpositionierung und -durchquerung durchgeführt werden muss, um den Stil während der Interaktion zu ändern .

Lösung:

Da es sich um ein Problem mit der CSS-Stileinstellungsmethode handelt, wie können wir Änderungen entwerfen?

Tatsächlich können wir diesem Konzept folgen: so wenig neue Steuerelemente hinzufügen wie mögliche Klasse, um nachfolgende js-Operationen zu reduzieren. Die obige Methode besteht beispielsweise darin, zu jedem Li in der Lösung von Anforderung 2 eine „ausgewählte Klasse“ hinzuzufügen, z. B. Klassenebene1_ausgewählt, Klassenebene2_ausgewählte .... Die ideale Lösung besteht hier darin, nur eine ausgewählte Klasse hinzuzufügen. Die ausgewählte Klasse muss jedoch in Verbindung mit der ID jedes LI verwendet werden, um sicherzustellen, dass jede ausgewählte Klasse einen anderen Stil hat. Vielleicht verstehen einige Schüler hier nicht viel, das ist in Ordnung! Schauen Sie sich einfach den Code unten an. Neugestaltung der Interaktion von Anforderung 2 (ausgewählt)

Als nächstes können wir sehen, wie der Code in js meiner Meinung nach auch geändert wird Stilklasse, schreiben Sie zuerst den js-Operationscode. Ist er derselbe wie der, den ich unten geschrieben habe?

#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;
}

Fühlen Sie sich nach dem Lesen des Codes genauso glücklich wie ich? Schließlich kann nur die Änderung der Art und Weise, wie Klassen in CSS hinzugefügt werden, den nachfolgenden JS-Code so prägnant machen! Eine hier gezogene Schlussfolgerung ist also (bereits oben erwähnt):

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

});

Fügen Sie so wenige neue Kontrollklassen wie möglich hinzu, um nachfolgende js-Operationen zu reduzieren.

Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie CSS ID und Klasse verwendet, um Elementstile zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!