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)

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Problem: vue-cil3 wird mit Warnungen ausgeführt, ...

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.

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

Verwenden Sie auto.js, um die automatische tägliche Check-in-Funktion zu realisieren

Methoden und Vorschläge zur Uniapp-Projektoptimierung

Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme

Einige Erfahrung im Aufbau des React Native-Projektframeworks

Analyse der vernachlässigten DOCTYPE-Beschreibung

So überprüfen Sie, ob der Grafiktreiber erfolgreich in Ubuntu installiert wurde

Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung

Detaillierte Erklärung zur Verwendung von Bussen in Vue

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Artikel empfehlen

Wie InnoDB Transaktionsisolationsebenen geschickt implementiert

Vue+echarts realisiert Fortschrittsbalken-Histogramm

Der Unterschied zwischen HTML Empty Link href="#" und href="javascript:void(0)"

JavaScript implementiert Informationen zur Kennwortfeldüberprüfung

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Lösung für das Problem, dass die virtuelle Maschine Ubuntu 16.04 keine Verbindung zum Internet herstellen kann

Detaillierte Erklärung zur Verwendung des Linux-Befehls Traceroute

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

Beispielanalyse des Prinzips und der Lösung des MySQL-Gleitreihenfolgeproblems

Die detaillierteste Methode zur Installation von Docker auf CentOS 8

Warum Seconds_Behind_Master immer noch 0 ist, wenn eine MySQL-Synchronisierungsverzögerung auftritt

Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?

Probleme und Lösungen bei der Nutzung der MySQL-Datenbanküberwachungssoftware Lepus

Tutorial zur Installation der DAMO-Datenbank auf Centos7

Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL