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
Vollständige Analyse des Vue-Diff-Algorithmus
Inhaltsverzeichnis Vorwort Vue-Aktualisierungsans...
Detaillierte Erklärung zur Verwendung von ElementUI in Vue
Anmeldung + SessionStorage Effektanzeige Nach ein...
Beispiel für die Integration von Kafka mit Nginx
Hintergrund nginx-kafka-module ist ein Plug-In fü...
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Inhaltsverzeichnis 1. Einweg-Wertübertragung zwis...
JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld
Manchmal ist es notwendig, bei Benutzereingaben e...
JavaScript MouseEvent-Fallstudie
Mausereignis Wenn die Maus eine bestimmte Operati...
So setzen Sie das MySQL-Root-Passwort unter Windows zurück
Heute habe ich festgestellt, dass WordPress keine...
Grafisches Tutorial zur Installation der dekomprimierten Version von mysql5.7.14
MySQL ist in Community Edition (Community Server)...
Vue/React-Einzelseitenanwendung zurück ohne Aktualisierungslösung
Inhaltsverzeichnis Einführung Warum die Mühe? Com...
Implementierung des Attributs „list-style-type“ vor CSS-geordneten oder ungeordneten Listen
Beispiel: <html> <Kopf> <style typ...
Implementierung der automatischen Vervollständigung von Docker-Befehlen
Vorwort Ich weiß nicht, wie lange dieser Freund D...
Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden
Inhaltsverzeichnis 1. Was ist eine Komponente? 2....
Detaillierte Erklärung des Unterschieds zwischen run/cmd/entrypoint in Docker
In Dockerfile können run, cmd und entrypoint zum ...
Beispiel zum Festlegen der pseudostatischen WordPress-Eigenschaft in Nginx
Zitat aus Baidus Erklärung zu Pseudostatik: Pseud...
Einige Erfahrungen in der Selbstkultivierung von Künstlern
Da der Einfluss des Unternehmens wächst und seine...