Die konkrete Umsetzung des JavaScript-exklusiven Denkens

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)

Artikel empfehlen

Beispielcode für HTML-Layout links und rechts

CSS: Code kopieren Der Code lautet wie folgt: html...

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

In diesem Artikel wird der spezifische Code von J...

Tutorial zur Installation einer MySQL-ZIP-Datei

In diesem Artikel wird die spezifische Methode zu...

Detailliertes Tutorial zur Installation von mysql5.7.21 unter einem Windows-System

MySQL Installer bietet eine benutzerfreundliche, ...

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...

Detaillierte Erklärung zur Verwendung von awk unter Linux

Bevor wir awk lernen, sollten wir sed, grep, tr, ...

Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster

1. Knoten löschen Führen Sie kubectl delete node ...

So installieren Sie das ZSH-Terminal in CentOS 7.x

1. Installieren Sie grundlegende Komponenten Führ...

Grundlegendes zu MySQL-Clusterindizes und wie Clusterindizes wachsen

In dieser Anmerkung beschreiben wir kurz Was ist ...

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Docker-Attach-Befehl docker attach [options] 容器st...

Binäre Typoperationen in MySQL

Dieser Artikel stellt hauptsächlich die binären O...

Natives JS zur Implementierung der Drag-Position-Vorschau

In diesem Artikel wird eine kleine Demo gezeigt, ...

Flussdiagramm für den Webserverzugriff auf HTTP und HTTP-Zusammenarbeit

Ein Webserver kann mehrere Websites mit unabhängi...

Implementierungsbeispiel für das Zurücksetzen des CSS-Reset-Stils

Einführung: Alle Browser verfügen über Standardst...

React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente

Inhaltsverzeichnis Was ist ein Skelettsieb? Demo ...