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.

Der Algorithmus des exklusiven Denkens lautet:
Eliminieren Sie andere (einschließlich sich selbst) und legen Sie dann den Effekt fest, den Sie für sich selbst erzielen möchten. Kurz gesagt bestehen die Implementierungsschritte der exklusiven Idee darin, alle Elemente zu löschen und das aktuelle Element festzulegen.

Es kann einfach so verstanden werden:

Klare Stile für alle Elemente (andere löschen)
Legen Sie den Stil für das aktuelle Element fest (überlassen Sie es mir)

Zu beachten ist, dass die Reihenfolge hierbei nicht rückgängig gemacht werden kann.
Auf der Seite befinden sich beispielsweise fünf Schaltflächen, und wir möchten dafür ein zyklisches Klickereignis implementieren: Wenn auf eine Schaltfläche geklickt wird, ändert sich die Farbe dieser Schaltfläche. Wie sollen wir das tun?

1. Lassen Sie uns zunächst fünf Schaltflächen erstellen.
Wie unten dargestellt:

    <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 for Schleife jeder Schaltfläche ein Klickereignis hinzu. Löschen Sie zuerst die Stile aller Schaltflächen in der inneren Schleife und fügen Sie dann den Stil der aktuell angeklickten Schaltfläche in der äußeren Schleife hinzu.

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:

Bildbeschreibung hier einfügen

Schauen wir uns einige Beispiele an!

1. Implementieren Sie eine einfache Tab-Leisten-Umschaltfunktion

Der 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:

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

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:

Implementierung einer exklusiven Sperre zwischen mehreren C#-Threads
Golang verwendet Gorm, um eine exklusive Datenbanksperre für Updates hinzuzufügen
Beispielanalyse der Verwendung gemeinsam genutzter und exklusiver Sperren in MySQL
Detaillierte Erläuterung des in der Java-Programmierung implementierten exklusiven Sperrcodes

<<: Detaillierte Erklärung des Linux-Netstat-Befehls

>>: Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

JS-Dekorationsmuster und TypeScript-Dekoratoren

Die konkrete Umsetzung des JavaScript-exklusiven Denkens

1. Implementieren Sie eine einfache Tab-Leisten-Umschaltfunktion

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.

JS-Dekorationsmuster und TypeScript-Dekoratoren

Darstellung des Vorgangs zur Verwendung von FileZilla zur Verbindung mit dem FTP-Server

Zusammenfassung der Wissenspunkte zur MySQL-Master-Slave-Replikation

So richten Sie Windows Server 2019 ein (mit Bildern und Text)

Verwenden Sie MySQL, um Port 3306 zu öffnen/ändern und Zugriffsberechtigungen in der Ubuntu/Linux-Umgebung zu öffnen

So lösen Sie das Phantomleseproblem in MySQL

Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7

Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

Fortgeschrittenes Front-End, das Ihnen die Verwendung der Javascript-Speicherfunktion beibringt

W3C Tutorial (9): W3C XPath Aktivitäten

Artikel empfehlen

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

Implementierung der Einstellungen für virtuellen Nginx-Host basierend auf Domänenname, Port und unterschiedlicher IP

Detaillierte Erklärung der Vue-Filter

Detaillierte Erklärung der Verwendung von Bildschirmbefehlen in Linux

Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet

Teilen Sie den Installationsdatensatz für MySql8.0.19

Vue implementiert das Bild mit Schaltflächenwechsel

Detaillierte Erklärung des Beispiels von Connect auf der Socket (TCP)-Clientseite aus dem Linux-Quellcode

So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS

Der Unterschied zwischen HTML-Frame, Iframe und Frameset

Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens

Beispiel für eine einfache Operation einer MySQL-Abfrageanweisung

Binäre Typoperationen in MySQL

So implementieren Sie verteilte Transaktionen in MySQL XA

JQuery implementiert das Ausblenden und Anzeigen von Animationseffekten