JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Einkaufswagens (ES6 objektorientiert)

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <title>ES6-Einkaufswagen</title>
  <style type="text/css">
   Tisch {
    Breite: 50%;
    Position: relativ;
    Rand: 0px automatisch;
    Rahmen-Zusammenbruch: Zusammenbruch;
    Rand: 1px durchgehend grau;
    Box-Größe: Rahmenbox;
   }
   das {
    Hintergrundfarbe: Koralle;
    Höhe: 2,5em;
    Rand: 0 automatisch;
   }
   tr {
    Höhe: 2,5em;
    Rand: 0 automatisch;
    Textausrichtung: zentriert;
   }
   .Kasten {
    Rand: automatisch;
    Breite: 50%;
   }
  </Stil>
 </Kopf>
 <Text>
  <h3 style="text-align: center;margin-top: 100px;">Ich schätze, dir gefällt</h3>
  <Tabellengrenze="1px" id="Tabelle aktualisieren">
   <tbody>
   <tr>
    <th>Seriennummer</th>
    <th>Produktname</th>
    <th>Stückpreis</th>
    <th>Betrieb</th>
   </tr>
   <tr Klasse="Update-Waren">
    <td>1</td>
    <td>Roujiamo</td>
    <td>8</td>
    <td><input type="button" class="update" value="Zum Warenkorb hinzufügen" /></td>
   </tr>
   <tr class="update-goods">
    <td>2</td>
    <td>Den Teig kneten</td>
    <td>6</td>
    <td><input type="button" class="update" value="Zum Warenkorb hinzufügen" /></td>
   </tr>
   <tr class="update-goods">
    <td>3</td>
    <td>Gefroren</td>
    <td>3</td>
    <td><input type="button" class="update" value="Zum Warenkorb hinzufügen" /></td>
   </tr>
   <tr Klasse="Update-Waren">
    <td>4</td>
    <td>Hammelsuppenbrötchen</td>
    <td>25</td>
    <td><input type="button" class="update" value="Zum Warenkorb hinzufügen" /></td>
   </tr>
   </tbody>
  </Tabelle>
  <h3 style="text-align: center;">Warenkorb</h3>
  <table border="1px" id="Waren">
   <tbody>
    <tr>
     <th>Seriennummer</th>
     <th>Produktname</th>
     <th>Menge</th>
     <th>Stückpreis</th>
     <th>Zwischensumme</th>
     <th>Betrieb</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Roujiamo</td>
     <td>
      <Schaltflächentyp="Schaltfläche">-</Schaltfläche>
      <span class="waren-num">0</span>
      <Schaltflächentyp="Schaltfläche">+</Schaltfläche>
     </td>
     <td>
      Stückpreis: <span class="goods-price">8</span>
     </td>
     <td>
      Zwischensumme: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="Löschen" />
     </td>
    </tr>
    <tr>
     <td>2</td>
     <td>Den Teig kneten</td>
     <td>
      <Schaltflächentyp="Schaltfläche">-</Schaltfläche>
      <span class="waren-num">0</span>
      <Schaltflächentyp="Schaltfläche">+</Schaltfläche>
     </td>
     <td>
      Stückpreis:<span class="goods-price">6</span>
     </td>
     <td>
      Zwischensumme: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="Löschen" />
     </td>
    </tr>
    <tr>
     <td colspan="5">
      Es gibt insgesamt <span id="goods-total-num">0</span> Artikel mit einem Gesamtpreis von <span id="goods-total-price">0</span> Yuan.
     </td>
    </tr>
   </tbody>
  </Tabelle>
 </body>
</html>
<Skripttyp="text/javascript">
 Klasse Warenkorb {
  Konstruktor() {
   dies.eventBind();
  }
  //Gesamtmenge der Waren abrufen und aktualisieren getGoodsNumAndUpdate() {
   //Menge aller Waren abrufen let oGoodsNum = document.getElementsByClassName("goods-num");
   //Den Gesamtwert der Warenanzahl speichern let goodsTotalNum = 0;
   //Schleife durch alle Waren for (let i = 0; i < oGoodsNum.length; i++) {
    //Menge aller geschleiften Waren addieren goodsTotalNum += Number(oGoodsNum[i].innerHTML);
   }
   //Die Gesamtzahl der Waren in der Zusammenfassungsspalte abrufen let oGoodsTotalNum = document.getElementById("goods-total-num");
   //Weisen Sie die Summe der in der Schleife erhaltenen Warenanzahl der Gesamtwarenanzahl in der Zusammenfassungsspalte zu oGoodsTotalNum.innerHTML = goodsTotalNum;
  }
  //Den Gesamtpreis der Ware abrufen und aktualisieren getGoodsPriceAndUpdate() {
   //Zwischensumme abrufen let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
   //Erstellen Sie ein neues Element, das den Zwischensummenwert akzeptiert (für die endgültige Zuweisung an das Element, das die Zwischensumme erhält)
   Lassen Sie Warengesamtpreis = 0;
   //Schleife durch alle Zwischensummen for (let i = 0; i < oGoodsSinglePrice.length; i++) {
    //Alle Zwischensummenmengen addieren, durchlaufen goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
   }
   //Den Gesamtpreis der Zusammenfassungsspalte abrufen let oGoodsTotalPrice = document.getElementById("goods-total-price");
   //Die Summe der in der Schleife ermittelten Zwischensummenmengen dem Gesamtpreis in der Zusammenfassungsspalte zuweisen oGoodsTotalPrice.innerHTML = goodsTotalPrice;
  }
  //2. Holen Sie sich die Zwischensumme getSinglePrice(num, price) {
   //Die Zwischensumme jeder Zeile ist gleich dem Produkt aus dem Stückpreis und dem Produkt dieser Zeile. return num * price;
  }
  // Plus-Button-Methode addGoods(btn) {
   //Holen Sie sich das vorherige Geschwisterelement des Pluszeichens (den mittleren Wert)
   let oGoodsNum = btn.vorherigesElementGeschwister;
   //1. Nach dem Klicken erhöht sich der Wert um eins oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
   //Stückpreis abrufen (das untergeordnete Element des nächsten Elements des übergeordneten btn-Elements)
   let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
   // Holen Sie sich die Zwischensumme (das untergeordnete Element des nächsten Elements des nächsten Elements des übergeordneten Elements)
   let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
   //2. Den Zwischensummenwert erneut abrufen und der Zwischensumme oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML) zuweisen;
   //3. Gesamtwarenmenge abrufen und aktualisieren (Aufruf erneut ausführen > Daten aktualisieren)
   dies.getGoodsNumAndUpdate();
   //4. Gesamtpreis der Ware abrufen und aktualisieren (aufrufen von „Erneut ausführen > Daten aktualisieren“)
   dies.getGoodsPriceAndUpdate();
  }
  //Minus-Button-Methode minGoods(btn) {
   //Holen Sie sich das nächste Geschwisterelement des Minuszeichens (den mittleren Wert)
   let oGoodsNum = btn.nextElementSibling;
   //Beurteilen, ob die Anzahl der Waren größer als Null ist if (oGoodsNum.innerHTML > 0) {
    //1. Nach dem Klicken verringert sich der Wert um eins oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
    //Stückpreis abrufen (das untergeordnete Element des nächsten Elements des übergeordneten btn-Elements)
    let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
    // Holen Sie sich die Zwischensumme (das untergeordnete Element des nächsten Elements des nächsten Elements des übergeordneten Elements)
    let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
    //2. Den Zwischensummenwert erneut abrufen und der Zwischensumme oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML) zuweisen;
    //3. Gesamtwarenmenge abrufen und aktualisieren (Aufruf erneut ausführen > Daten aktualisieren)
    dies.getGoodsNumAndUpdate();
    //4. Gesamtpreis der Ware abrufen und aktualisieren (aufrufen von „Erneut ausführen > Daten aktualisieren“)
    dies.getGoodsPriceAndUpdate();
   }
  }
  //Methode der Schaltfläche „Löschen“ delGoods(btn) {
   //Das Einkaufswagen-Tabellenelement abrufen let god = document.getElementById("goods");
   //Holen Sie sich das übergeordnete Element des übergeordneten Elements dieser Schaltfläche. let oTr = btn.parentNode.parentNode;
   //Dann dieses Element löschen (bezieht sich hier auf das gesamte durch die Schaltfläche ausgewählte tr-Element)
   oTr.entfernen();
   //Zahlen neu anordnen (alle tr-Unterelemente unter dem Tabellenelement mit dem Namen „god“ durchlaufen) (beim zweiten Unterelement beginnen und die letzte Zwischensummenzeile entfernen)
   für (lass i = 1; i < god.firstElementChild.children.length - 1; i++) {
    // Weise den Elementwert i nach der Schleife dem ersten Kindelement td unter dem Kindelement tr unter dem Tabellenelement mit dem Namen god zu.
    Gott.firstElementChild.children[i].firstElementChild.innerHTML = i;
   }
   //3. Gesamtwarenmenge abrufen und aktualisieren (Aufruf erneut ausführen > Daten aktualisieren)
   dies.getGoodsNumAndUpdate();
   //4. Gesamtpreis der Ware abrufen und aktualisieren (aufrufen von „Erneut ausführen > Daten aktualisieren“)
   dies.getGoodsPriceAndUpdate();
  }
  
  //Bestellmethode update() hinzufügen { 
   //Alle Elemente mit dem Klassennamen update abrufen let btn = document.getElementsByClassName("update");
   //Alle Elemente mit der ID „update-table“ abrufen. let updateTable = document.getElementById("update-table");
   //Das Einkaufswagen-Tabellenelement abrufen let god = document.getElementById("goods"); 
   //Alle untergeordneten Elemente tr des ersten untergeordneten Elements tbody des Einkaufswagen-Tabellenelements abrufen
   lass Götter = Gott.erstesElementKind.Kinder;
   //Dem Zielelement wird false zugewiesen.
   lass flag = false;
   //Dadurch soll verhindert werden, dass das Warenkorbobjekt im Ereignistext überschrieben wird. let that = this;
   //Durchlaufe alle Elemente mit Klassennamen update for (let i = 0; i < btn.length; i++) {
    //Klick-Ereignis mit Klassennamen update btn[i].onclick = function() {
     //Durchlaufe alle Unterelemente tr des ersten Unterelements tbody des Einkaufswagen-Tabellenelements
     für (let j = 0; j < gods.length - 1; j++) {
      //Schleife, um zu bestimmen, ob dieses Gericht im Menü vorhanden ist. Wenn dieses Gericht vorhanden ist, addiere 1.
      //Die ursprüngliche Absicht besteht darin, das gleichnamige Produkt im Einkaufswagen zu finden. Wenn es eines gibt, führen Sie die Anzahl der Produkte in den Warenkorbdaten + 1 aus. Wenn nicht, setzen Sie das Flag auf „true“ und springen Sie aus der Beurteilung heraus. //Dies ist der Klassenname des Eingabe-Tags zum Aktualisieren des Elements. //Der Inhalt des ersten untergeordneten Elements unter der Durchquerung aller untergeordneten Elemente tr in der Einkaufswagentabelle == Der Inhalt des vorherigen Geschwisterelements des übergeordneten Elements td mit dem Klassennamen „Element aktualisieren“ Eingabe, wenn (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
       //Der Inhalt des zweiten Unterelements unter der Durchquerung aller Unterelemente tr in der Einkaufswagentabelle (dh die Anzahl der Artikel im Einkaufswagen) + 1
       Götter[j].Kinder[2].Kinder[1].innerHTML = " " + (Zahl(Götter[j].Kinder[2].Kinder[1].innerHTML) + 1) + " ";
       //Der Inhalt des vierten Unterelements unter der Durchquerung aller Unterelemente tr in der Einkaufswagentabelle (dh der Wert der Zwischensumme im Einkaufswagen wird zugewiesen)
       gods[j].children[4].innerHTML = 'Zwischensumme: <span class="goods-single-price">' +
       Götter[j].Kinder[2].Kinder[1].innerHTML * Götter[j].Kinder[3].erstesElementKind.innerHTML + '</span>';
       //3. Gesamtwarenmenge abrufen und aktualisieren (Aufruf erneut ausführen > Daten aktualisieren)
       dass.getGoodsNumAndUpdate();
       //4. Gesamtpreis der Ware abrufen und aktualisieren (aufrufen von „Erneut ausführen > Daten aktualisieren“)
       dass.getGoodsPriceAndUpdate();
       //Weisen Sie dem Flag-Wert „false“ zu.
       Flagge = falsch;
       //Aus dieser Schleife springen break;
      } anders {
      //Ausführen, wenn der Inhalt des ersten untergeordneten Elements aller untergeordneten Elemente tr in der Einkaufswagentabelle durchlaufen wurde! = der Inhalt des vorherigen Geschwisterelements des übergeordneten Elements td mit dem Klassennamen „Elementeingabe aktualisieren“//Flag auf „true“ setzen
       Flagge = wahr;
      }
     }
     wenn (Flagge) {
      //Wenn es kein solches Gericht gibt, fügen Sie hinzu //Erstellen Sie einen Knoten tr
      Lassen Sie tr = document.createElement("tr");
      //Füge den Inhalt dieses Knotens hinzu tr.innerHTML=
       '<td>'+(Götter.Länge-1)+'</td>'+
       '<td>'+dieser.übergeordneterKnoten.vorherigesElementGeschwister.vorherigesElementGeschwister.innerHTML+
       '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>Stückpreis:<span class="goods-price">' +
       dieser.übergeordneterKnoten.vorherigesElementGeschwister.innerHTML +
       '</span></td><td>Zwischensumme:<span class="goods-single-price">' + 
       dieser.übergeordneterKnoten.vorherigesElementGeschwister.innerHTML +
       '</span></td><td><input type="button" class="deled" value="Löschen" /></td>';
       //Neue Elemente zu tbodygod.firstElementChild.insertBefore(tr, god.firstElementChild.lastElementChild) hinzufügen;
      //Ereignisschaltfläche auslösen that.eventBind();
      //3. Gesamtwarenmenge abrufen und aktualisieren (Aufruf erneut ausführen > Daten aktualisieren)
      dass.getGoodsNumAndUpdate();
      //4. Gesamtpreis der Ware abrufen und aktualisieren (aufrufen von „Erneut ausführen > Daten aktualisieren“)
      dass.getGoodsPriceAndUpdate();
     }
    }
    // Ordne die Reihenfolge der Elemente in „Guess You Like“ neu an for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
     // Weisen Sie der neu hinzugefügten Produktseriennummer die sortierten Werte zu updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
    }
   }
  }
  //Ereignisschaltfläche auslösen eventBind() {
   //Alle Schaltflächen mit dem Tag-Namen botton abrufen let oBtns = document.getElementsByTagName("button");
   //Dadurch soll verhindert werden, dass das Warenkorbobjekt im Ereignistext überschrieben wird. let that = this;
   //Alle Schaltflächen in einer Schleife ausführen for (let i = 0; i < oBtns.length; i++) {
    if (i % 2) {//Löst die Methode addGoods() aus, wenn es eine ungerade Zahl ist oBtns[i].onclick = function() {
      das.addGoods(dies);
     }
    } sonst {//Löse die Methode minGoods() aus, wenn es eine gerade Zahl ist oBtns[i].onclick = function() {
      das.minGoods(dies);
     }
    }
   }
   //Alle Elemente mit dem Klassennamen deled abrufen let oDelBtns = document.getElementsByClassName("deled");
   //Schleife durch alle gelöschten Elemente for (let i = 0; i < oDelBtns.length; i++) {
    //Klick-Ereignis des gelöschten Elements oDelBtns[i].onclick = function() {
     //Rufen Sie die Methode delGoods() auf, um den Löscheffekt auszuführen that.delGoods(this);
    }
   }
   //Aufruf zum Hinzufügen der Reihenfolge this.update();
  }
 }
 sei c = neuer Einkaufswagen();
</Skript>

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:

Verständnis und Anwendung des Destrukturierungsoperators von JavaScript ES6
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)
Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
Unterschiede zwischen ES6-Vererbung und ES5-Vererbung in js
Detaillierte Erklärung, wie Node.js mit ES6-Modulen umgeht
Detaillierte Erläuterung der JS ES6-Codierungsstandards
JS beherrscht schnell die Verwendung von ES6-Klassen
Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen
Mehrere magische Verwendungen des JS ES6 Spread-Operators
Über Front-End JavaScript ES6 Details

<<: So verwenden Sie den MySQL-Autorisierungsbefehl „grant“

>>: nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads