js, um eine einfache Produkt-Screening-Funktion zu erreichen

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:
  • Native js realisiert Produkt-Screening-Funktion
  • JS realisiert Produkt-Screening-Funktion

<<:  Eine universelle Nginx-Schnittstelle zur Implementierung der Reverse-Proxy-Konfiguration

>>:  Langsame MySQL-Abfrage: Langsame Abfrage aktivieren

Artikel empfehlen

Beispiel für die Verwendung von CASE WHEN beim Sortieren in MySQL

Vorwort In einem früheren Projekt wurde die Sorti...

So führen Sie nach der Kompilierung und Installation von Nginx ein reibungsloses Upgrade durch

Wenn Sie nach der Kompilierung und Installation v...

Detaillierte Erklärung von COLLATION-Beispielen in MySQL, die Sie möglicherweise übersehen haben

Vorwort Die Zeichenfolgentypen der MySQL-Datenban...

So konfigurieren Sie den Nginx-Lastausgleich

Inhaltsverzeichnis Nginx-Lastausgleichskonfigurat...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

webpack -v Fehlerlösung

Hintergrund Ich möchte die Webpack-Version überpr...

So erstellen Sie eine kontinuierliche Integrationsumgebung mit Jenkins+Maven+Git auf CentOS7

Dieser Artikel verwendet die Bereitstellung eines...

Der Unterschied zwischen redundanten und doppelten Indizes in MySQL

MySQL ermöglicht das Erstellen mehrerer Indizes f...

Detaillierte Erläuterung der MySQL SQL-Anweisungsanalyse und Abfrageoptimierung

So erhalten Sie SQL-Anweisungen mit Leistungsprob...

Eine kurze Einführung in die MySQL-Speicher-Engine

1. MySql-Architektur Bevor wir die Speicher-Engin...

Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro

Inhaltsverzeichnis 1. Konfigurieren Sie das Vue-F...

jQuery + h5 realisiert den Spezialeffekt der Neun-Quadrate-Lotterie (Front-End- und Back-End-Code)

Vorwort: Frontend: jq+h5, um den dynamischen Neun...

Implementierung von Portalen und Fehlergrenzbehandlung in React

Inhaltsverzeichnis Portale Fehlergrenzenbehandlun...

JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine ​​zerschlagen werden müssen

In diesem Artikel wird der spezifische JS-Code zu...

Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

Auf keinen Fall. Es stellt sich heraus, dass es L...