js, um eine einfache Produkt-Screening-Funktion zu erreichen
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung der Produkt-Screening-Funktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Anwendungsszenario: Produktscreening
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
Listenstil: keiner;
Textdekoration: keine;
}
.wählen {
Breite: 500px;
Höhe: automatisch;
Rand: automatisch;
}
.Wählen Sie nav {
Höhe: 50px;
Hintergrundfarbe: rot;
}
.Wählen Sie nav span {
Rand: 0,5px;
}
.wählen .zeigen {
Farbe: rot;
}
.wähle ul li {
Rand: 1px tief schwarz;
}
.wähle ul li a {
Box-Größe: Rahmenbox;
Anzeige: Inline-Block;
Breite: 40px;
Rahmen links: 1px tief schwarz;
Rand: 5px;
Polsterung links: 5px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="wählen">
<Navigation></Navigation>
<ul>
<li>
<strong>Mobil:</strong>
<a href="javascript:;">Xiaomi</a>
<a href="javascript:;">Huawei</a>
<a href="javascript:;">Apfel</a>
<a href="javascript:;">OPPO</a>
<a href="javascript:;">vivo</a>
</li>
<li>
<strong>Preis:</strong>
<a href="javascript:;">3200</a>
<a href="javascript:;">2600</a>
<a href="javascript:;">899</a>
<a href="javascript:;">2799</a>
<a href="javascript:;">2299</a>
</li>
<li>
<strong>Bildschirm:</strong>
<a href="javascript:;">399</a>
<a href="javascript:;">600</a>
<a href="javascript:;">800</a>
<a href="javascript:;">1200</a>
</li>
</ul>
</div>
</body>
</html>
<Skripttyp="text/javascript">
var li = document.querySelectorAll('li');
var stack = []; //Drei Arten von Optionen speichern
für (var i = 0; i < li.Länge; i++) {
// Holen Sie sich die Option in jedem li zur Verarbeitung var options = li[i].querySelectorAll("a");
für (var j = 0; j < Optionen.Länge; j++) {
//Wenn eine Option angeklickt wird, wird die Kategorie des Klicks übergeben. // options[j].onclick = Aclick.bind(options[j], [i]); //1. Trenne das Klickereignis options[j].onclick = Bclick(i); //2. Trenne das Klickereignis }
}
</Skript>Beim Schreiben möchte ich diese Ereignisfunktion trennen, aber sie hat Parameter. Das Problem entsteht also Wie trenne ich eine Ereignisfunktion mit Parametern? ? ? Also: Es gibt zwei Methoden 1. Verwenden Sie Bind, um diesen Zeiger zu ändern und eine nicht ausgeführte Funktion zurückzugeben
Funktion Aclick(index) {
// Navigation löschen
var wählen = document.querySelector('.wählen');
var nav = document.querySelector(".nav auswählen");
wähle.removeChild(nav);
// Mit Stapel erneut hinzufügen stack[index] = this.innerHTML;
var nav = document.createElement("nav");
für (k = 0; k < Stapellänge; k++) {
if (stack[k] != "" && stack[k] != undefined) { // Überspringe die leeren Elemente im Stapel und füge span erneut zur Navigation hinzu
var span = document.createElement("span");
var a = document.createElement("a");
a.innerHTML = "X";
a.href = "javascript:void(0);";
span.innerHTML = Stapel[k];
a.onclick = Funktion() {
Stapel[index] = "";
nav.removeChild(dieser.übergeordneteKnoten);
}
span.appendChild(a);
nav.appendChild(span);
}
}
Wählen Sie.insertBefore(nav, wählen Sie.children[0]);
}2. Fügen Sie außerhalb der Registrierungsfunktion eine Funktion hinzu, um die Registrierungsfunktion zurückzugeben
Funktion Bclick(index) {
return Funktion() {
// Navigation löschen
var wählen = document.querySelector('.wählen');
var nav = document.querySelector(".nav auswählen");
wähle.removeChild(nav);
// Mit Stapel erneut hinzufügen stack[index] = this.innerHTML;
var nav = document.createElement("nav");
für (k = 0; k < Stapellänge; k++) {
if (stack[k] != "" && stack[k] != undefined) { // Überspringe die leeren Elemente im Stapel und füge span erneut zur Navigation hinzu
var span = document.createElement("span");
var a = document.createElement("a");
a.innerHTML = "X";
a.href = "javascript:void(0);";
span.innerHTML = Stapel[k];
a.onclick = Funktion() {
Stapel[index] = "";
nav.removeChild(dieser.übergeordneteKnoten);
}
span.appendChild(a);
nav.appendChild(span);
}
}
Wählen Sie.insertBefore(nav, wählen Sie.children[0]);
}
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Eine universelle Nginx-Schnittstelle zur Implementierung der Reverse-Proxy-Konfiguration
>>: Langsame MySQL-Abfrage: Langsame Abfrage aktivieren
Artikel empfehlen
4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen
1. Float + Überlauf: versteckt Diese Methode löst...
Empfehlen Sie einen coolen blinkenden Alarmknopf
Die Wirkung ist wie folgt: Der Code lautet wie fo...
Docker erstellt Cluster-MongoDB-Implementierungsschritte
Vorwort Aufgrund der Geschäftsanforderungen des U...
Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts mit reinem CSS
1. Prozentuale Basis für Elementbreite/-höhe/-pol...
Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes
In diesem Artikel finden Sie den spezifischen Cod...
Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen
Inhaltsverzeichnis js aufrufende Methode Android ...
Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können
Als ich den Dienst täglich überprüfte und mir die...
Anwendungsbeispiele für React Hooks
Inhaltsverzeichnis Ein einfaches Komponentenbeisp...
Docker Compose stellt ein SpringBoot-Projekt bereit, um eine Verbindung zu MySQL herzustellen, und die dabei auftretenden Fallstricke
Zuvor haben wir Docker verwendet, um das SpringBo...
CSS erzielt farbenfrohe und intelligente Schatteneffekte
Hintergrund Haben Sie sich jemals gefragt, wie Si...
Horizontales Header-Menü mit CSS3 implementiert
Ergebnis:Implementierungscode html <nav class=...
Detaillierte Erläuterung des Bereitstellungsprozesses des SEATA-Transaktionsdienstes Docker
1. Erstellen Sie eine Datenbankautorisierungserkl...
MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins
In MySQL 8.0.18 wurde eine neue Hash-Join-Funktio...
Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3
Vorwort In der Demonstration [IE9-] ist der Farbv...
MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)
1. Einführung in MMM: MMM steht für Multi-Master ...