Die konkrete Umsetzung des JavaScript-exklusiven Denkens
|
Im vorherigen Blog hat Xiao Xiong die Methoden verwandter Operationselemente aktualisiert. Was sollen wir jedoch tun, wenn es dieselbe Gruppe von Elementen gibt und wir möchten, dass ein bestimmtes Element einen bestimmten Stil erreicht? Hier kommt die Idee der zirkulären Ausgrenzung ins Spiel.
Es kann einfach so verstanden werden:
Zu beachten ist, dass die Reihenfolge hierbei nicht rückgängig gemacht werden kann. 1. Lassen Sie uns zunächst fünf Schaltflächen erstellen. <button>Schaltfläche 1</button>
<button>Schaltfläche 2</button>
<button>Schaltfläche 3</button>
<button>Schaltfläche 4</button>
<button>Schaltfläche 5</button>
2. Elemente abrufen <Skript>
//Element abrufen var btn = document.getElementsByTagName('button');
konsole.log(btn);
</Skript>
3. Durchlaufen Sie die Drucktasten für(var i =0; i<btn.length;i++){
konsole.log(btn[i]
}
4. Fügen Sie in der ersten btn[i].onclick = Funktion(){
für(var j =0;j<btn.length;j++){
btn[j].style.backgroundColor = '';
}
this.style.backgroundColor = "blau";
}
Der endgültige Effekt ist:
Schauen wir uns einige Beispiele an! 1. Implementieren Sie eine einfache Tab-Leisten-UmschaltfunktionDer Code lautet wie folgt: <!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<!-- Schreiben Sie eine vollständige Seite mit Tab-Umschalteffekten-->
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.box_1 {
Breite: 800px;
Höhe: 400px;
Hintergrundfarbe: RGB (141, 169, 173);
Rand: 100px automatisch;
}
ul {
Position: absolut;
oben: 64px;
links: 220px;
Höhe: 35px;
Zeilenhöhe: 35px;
Textausrichtung: zentriert;
}
li {
Breite: 80px;
Höhe: 35px;
Listenstil: keiner;
schweben: links;
Rand: 1px durchgezogen #ccc;
Rand links: 2px;
Rahmen oben links – Radius: 6px;
Rahmen oben rechts – Radius: 6px;
}
.li1 {
Schriftstärke: 700;
Farbe: Schwarz;
Rahmen unten: keiner;
Hintergrundfarbe: himmelblau;
Cursor: Zeiger;
}
.Artikel{
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div-Klasse = "Box">
<ul>
<li class='li1'>Tag 1</li>
<li>Beschriftung 2</li>
<li class = 'li2' style="width:150px">Beschriftung mit adaptiver Breite</li>
</ul>
<div Klasse="Box_1">
<div class="item" style = "display:block">Inhalt des ersten Tags</div>
<div class="item">Der Inhalt des zweiten Tags</div>
<div class="item">Inhalt der adaptiven Breitenbeschriftungen</div>
</div>
</div>
<Skript>
var li = document.querySelectorAll('li');
konsole.log(li);
var item = document.querySelectorAll('.item');
konsole.log(Element);
für(var i =0;i<li.length;i++){
li[i].setAttribute('index',i);
li[i].onclick = Funktion(){
für(var j =0;j<item.length;j++){
li[j].Klassenname = '';
konsole.log(li[i]);
}
dies.Klassenname = "li1";
var index = this.getAttribute('index');
konsole.log(index);
für(var k = 0; k < item.length; k++) {
Element[k].style.display='keine';
}
Element[index].style.display = "Block";
}
}
</Skript>
</body>
</html>
Der Effekt ist:
2. Implementieren Sie eine dynamische, anklickbare Anzeigeseite für die Umfrageergebnisse. Dabei muss der entsprechende Fortschrittsbalken größer werden, wenn die Kontrollkästchenoption angeklickt wird.<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.Kasten{
Breite: 700px;
Rand: 10px automatisch;
}
.Bar {
Breite: 200px;
Höhe: 15px;
Polsterung: 1px;
Hintergrundfarbe: rgb(250, 249, 249);
}
.bar_in{
Breite: 7 %;
Höhe: 100 %;
Übergang: Breite 0,5 s;
}
.bar_in1 {
Hintergrundfarbe: orange;
}
.bar_in2{
Hintergrundfarbe: gelb;
}
.bar_in3{
Hintergrundfarbe: braun;
}
.bar_in4{
Hintergrundfarbe: Schokolade;
}
.bar_in5{
Hintergrundfarbe: grün;
}
.bar_in6{
Hintergrundfarbe: blau;
}
.bar_in7{
Hintergrundfarbe: Kornblumenblau;
}
.bar_in8{
Hintergrundfarbe: Dunkelrosa;
}
.bar_in9{
Hintergrundfarbe: rgb(171, 204, 23);
}
.bar_in10{
Hintergrundfarbe: rot;
}
tr{
Breite: 800px;
Höhe: 40px;
}
td{
Schriftgröße: 14px;
Breite: 200px;
Zeilenhöhe: 40px;
Rahmen unten: 1px durchgezogen #ccc;
}
tr #no1{
Breite: 300px;
}
.header{
Schriftgröße: 16px;
Schriftstärke: 700;
}
.t1 {
Breite: 500px;
}
Spanne{
Farbe: rot;
Schriftgröße: 14px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<Tabelle>
<tr>
<td colspan="4" class= 'header'>Sind Sie von der „schönsten ländlichen Lehrerin“ berührt? <span>(erforderlich)</span></td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" >Ich bin sehr gerührt, sie ist sehr schön</td>
<td>
<div Klasse="Bar">
<div Klasse="Bar_in Bar_in1">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">Ich bin sehr gerührt. Sie ist sehr schön</td>
<td>
<div Klasse="Bar">
<div Klasse="Bar_in Bar_in2">
</div>
</div>
</td>
<td>335733(96,16 %)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">Kein Gefühl, es gibt viele solcher Dinge</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in3">
</div>
</div>
</td>
<td>4997 (1,43 %)</td>
</tr>
<tr>
<td class='t1'><input type="checkbox" name="" id="">Nicht bewegt, vielleicht ist es Hype</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in4">
</div>
</div>
</td>
<td>8398 (2,41 %)</td>
</tr>
</Tabelle>
<Tabelle>
<tr>
<td colspan="3" class= 'header'>Was wären Sie bereit, für Li Ling und ihre Schule zu tun? <span>(erforderlich)</span></td>
</tr>
<tr>
<td class="t1"><input type="checkbox" name="" id="" >Spenden Sie ihnen Bücher, damit sie einen Leseraum haben können</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in5">
</div>
</div>
</td>
<td>163002(45,89 %)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Spenden Sie ihnen Geld, damit sie die Schule reparieren können</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in6">
</div>
</div>
</td>
<td>52692(15,09 %)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Erzählen Sie Ihren Freunden von Li Lings Geschichte</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in7">
</div>
</div>
</td>
<td>118533(33,96 %)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Nichts tun</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in8">
</div>
</div>
</td>
<td>14881(4,26 %)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Nichts tun</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in9">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="">Nichts tun</td>
<td>
<div Klasse="Bar">
<div Klasse="bar_in bar_in10">
</div>
</div>
</td>
<td>0(0%)</td>
</tr>
</Tabelle>
</div>
<Skript>
var Eingabe = document.querySelectorAll('Eingabe');
var barin = document.querySelectorAll('.bar_in');
var w = [10,98,30,25,50,22,38,30,34,20,20];
Konsole.log(Typ von(5+'%'));
console.log(Benutzer);
konsole.log(Eingabe);
für(var i =0;i<input.length;i++){
Eingabe[i].setAttribute('index',i)
Eingabe[i].onclick = Funktion(){
var index = this.getAttribute('index')
barin[index].style.width= w[index]+'%';
}
}
</Skript>
</body>
</html>
Der Effekt ist:
Dies ist das Ende dieses Artikels über die spezifische Implementierung exklusiver JavaScript-Ideen. Weitere relevante exklusive JavaScript-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung des Linux-Netstat-Befehls
Artikel empfehlen
Css3 realisiert nahtloses Scrollen und Anti-Shake
Frage Das nahtlose Scrollen von Bildern und Texte...
Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array
Inhaltsverzeichnis Array-Deduplizierung 1 Doppels...
5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile
Hallo zusammen, ich bin Liang Xu. Bei der Verwend...
Detaillierte Erklärung der Rolle des neuen Operators in Js
Vorwort Js ist heutzutage die am häufigsten verwe...
MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11
So installieren und konfigurieren Sie MySQL auf M...
Fallstudie zum Vue-Einkaufswagen
Inhaltsverzeichnis 1. Warenkorb-Beispiel 2. Code-...
Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen
Was sind Slots? Die Slot-Direktive ist v-slot, di...
Optimierung der Abfragegeschwindigkeit von MySQL mit mehreren zehn Millionen Daten mithilfe von Indizes
1. Die Rolle des Index Im Allgemeinen entspricht ...
Detaillierte Erklärung des Sidecar-Modus in Docker Compose
Inhaltsverzeichnis Was ist Docker Compose Anforde...
Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren
Inhaltsverzeichnis 1. Umweltinstallation 2. Erste...
Detaillierte Beschreibung allgemeiner Ereignisse und Methoden von HTML-Text
Veranstaltungsbeschreibung onactivate: Wird ausgel...
Abrufen der Erstellungszeit einer Datei unter Linux und ein praktisches Tutorial
Hintergrund Manchmal müssen wir den Erstellungsze...
Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems
Unabhängig davon, ob Sie ein Windows- oder Linux-...
Detaillierter Prozess zum Ändern der Apt-Quelle in die Alibaba Cloud-Quelle in Ubuntu 18.04
Inhaltsverzeichnis Vorwort: Ubuntu 18.04 ändert d...
Einführung in die Verwendung gängiger XHTML-Tags
Es gibt viele Tags in XHTML, aber nur wenige werd...