jQuery implementiert alle Warenkorbfunktionen

jQuery implementiert alle Warenkorbfunktionen

Heute werden wir einige grundlegende Funktionen des Einkaufswagens implementieren, darunter全選,增減商品數量,修改商品小計,計算總計和總和,刪除商品,選中添加背景顏色und andere allgemeine Funktionen.

Alle Codes der HTML-Struktur stehen am Ende des Artikels, wer es versteht, wird es verstehen! ! !

1. Alles auswählen

Alle Analysen auswählen:

  • Alle Ideen auswählen: Der ausgewählte Zustand (aktiviert) der drei kleinen Kontrollkästchenschaltflächen (j-Checkbox) darin folgt der Schaltfläche „Alle auswählen“ (checkall).
  • Da „aktiviert“ eine inhärente Eigenschaft des Kontrollkästchens ist, müssen wir die Methode prop() verwenden, um diese Eigenschaft abzurufen und festzulegen.
  • Weisen Sie den drei kleinen Kontrollkästchen einfach den Schaltflächenstatus „Alles auswählen“ zu.
  • Jedes Mal, wenn wir auf die kleine Kontrollkästchenschaltfläche klicken, beurteilen wir:
  • Wenn die Anzahl der ausgewählten kleinen Kontrollkästchen 3 beträgt, sollte die Schaltfläche „Alles auswählen“ ausgewählt werden, andernfalls sollte die Schaltfläche „Alles auswählen“ nicht ausgewählt werden.
  • :checked Selector:checked Sucht nach Formularelementen, die aktiviert sind.

Das Obige ist eine grundlegende Funktionsdemonstration, die wir erreichen möchten. Als nächstes schreiben wir darüber in der Fallstudie.

// Alles auswählen $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("aktiviert", $(this).prop("aktiviert"))
    });
 
    $(".j-checkbox").ändern(Funktion () {
        wenn ($(".j-checkbox:checked").Länge === $(".j-checkbox").Länge) {
            $(".checkall").prop("geprüft", true);
        } anders {
            $(".checkall").prop("geprüft", false);
        }
    });

2. Erhöhen oder verringern Sie die Warenmenge

Analyse der Warenmengenzunahme und -abnahme:

  • Kernidee: Zuerst deklarieren wir eine Variable. Wenn wir auf das +-Zeichen (Inkrement) klicken, lassen wir den Wert ++ und weisen ihn dann dem Textfeld zu.
  • Hinweis 1: Sie können die Menge dieses Produkts nur um den Wert des Brother-Textfelds (itxt) des aktuellen +-Zeichens erhöhen.
  • Der Wert des Formulars wird mit der Methode val() geändert.
  • Hinweis 2: Der Anfangswert dieser Variable sollte der Wert dieses Textfelds sein, und ++ wird basierend auf diesem Wert hinzugefügt. So erhalten Sie den Wert des Formulars
  • Die Idee des Minuszeichens (Dekrement) ist dieselbe, aber wenn der Wert des Textfelds 1 ist, kann er nicht subtrahiert werden.

Klicken Sie auf das Pluszeichen, um die Menge zu erhöhen, und auf das Minuszeichen, um sie zu verringern. Dies ist eine grundlegende Implementierung der Additions- und Subtraktionsfunktionen,最少大于等于一件商品!

Geben Sie dem Plus- und dem Minuszeichen jeweils ein Klickereignis, holen Sie sich dann den Wert im Formular und verwenden Sie eine Variable zum Erhöhen bzw. Verringern, um den Wert darin zu ändern.

    // Menge plus $(".increment").click(function () {
        var n = $(diese).geschwister(".itxt").val();
        n++;
        $(diese).geschwister(".itxt").val(n);
    })
    // Mengenreduzierung$(".decrement").click(function () {
        var n = $(diese).geschwister(".itxt").val();
        wenn (n == 1) {
            gibt false zurück;
        }
        N--;
        $(diese).geschwister(".itxt").val(n);
    });

3. Ändern Sie den Produktzwischenbetrag

Produkt-Zwischensummenanalyse ändern:

  • Kernidee: Jedes Mal, wenn Sie auf das + oder - Zeichen klicken, wird der Zwischenbetrag des Produkts berechnet, indem der Wert im Textfeld mit dem Preis des aktuellen Produkts multipliziert wird.
  • Hinweis 1: Sie können nur die Zwischensumme dieses Produkts erhöhen, die dem Zwischensummenmodul des aktuellen Produkts entspricht (P-Summe).
  • Das Ändern des Inhalts eines normalen Elements erfolgt mit der Methode text()
  • Hinweis 2: Um den aktuellen Preis des Produkts zu erhalten, entfernen Sie das ￥-Zeichen und multiplizieren Sie dann, um die Zeichenfolge substr(1) zu extrahieren.
  • Eltern('Selektor') können das angegebene Vorgängerelement zurückgeben
  • Wenn Sie im endgültigen Berechnungsergebnis 2 Dezimalstellen beibehalten möchten, verwenden Sie die Methode toFixed(2)
  • Nutzer können zudem direkt im Formular die Werte verändern und Zwischensummen berechnen. Verwenden des Formularänderungsereignisses
  • Multiplizieren Sie den neuesten Wert im Formular mit dem Stückpreis. Es bleibt jedoch die Zwischensumme des aktuellen Produkts.

Da der Wert in der Zwischensumme durch Klicken auf das Plus- oder Minuszeichen geändert wird, sollte der Code hier in das Klickereignis des Plus- oder Minuszeichens geschrieben werden. Nach dem Klicken auf dieses Ereignis entnehmen Sie den Wert aus dem Stückpreis und multiplizieren ihn mit dem Wert in der Menge, um den Gesamtpreis zu erhalten. Hier ist der grundlegende Entwurf des Implementierungsprozesses des Gesamtcodes.

    // Menge plus $(".increment").click(function () {
        var n = $(diese).geschwister(".itxt").val();
        n++;
        $(diese).geschwister(".itxt").val(n);
 
        // Zwischensumme des Produkts ändern var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var Preis = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + Preis);
        getSum();
    })
    // Mengenreduzierung$(".decrement").click(function () {
        var n = $(diese).geschwister(".itxt").val();
        wenn (n == 1) {
            gibt false zurück;
        }
        N--;
        $(diese).geschwister(".itxt").val(n);
        // Produktzwischensumme ändern var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var Preis = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + Preis);
        getSum();
    });

4. Summen und Summen berechnen

Summen und Summen für die Analyse berechnen:

  • Kernidee: Die Werte aller Textfelder addieren um die Gesamtmenge zu erhalten. Das Gleiche gilt für den Gesamtbetrag
  • Die Werte in den Textfeldern sind unterschiedlich. Wenn Sie sie addieren möchten, müssen Sie jede Traversierung verwenden. Deklarieren Sie eine Variable und fügen Sie sie hinzu
  • Durch Klicken auf die Zeichen + und - werden der Gesamtbetrag und der Betrag geändert. Wenn der Benutzer den Wert im Textfeld ändert, ändern sich auch der Gesamtbetrag und der Betrag.
  • Daher können Sie eine Funktion zum Berechnen der Gesamtsumme und des Betrags kapseln und diese Funktion für die beiden oben genannten Vorgänge aufrufen.
  • Hinweis 1: Die Summe ist die Summe der Werte im Textfeld mit val(). Die Summe ist der Inhalt des normalen Elements mit text()
  • Bitte beachten Sie, dass der Inhalt gemeinsamer Elemente vor dem Hinzufügen von ￥ entfernt und in eine digitale Schrift umgewandelt werden muss.

Das Wesentliche sollte sein, das Kontrollkästchen zu aktivieren, dann wird das Produkt in der Abrechnungsspalte gezählt. Hier schreibe ich die Summe aus Menge und Zwischensumme in den Warenkorb, sodass sich die Zwischensumme auch ändert, wenn sich die Menge ändert, was sich entsprechend auf die Daten in der Abrechnungsspalte auswirkt.

    //Kapselung der Anzahl und des Preises der abgerechneten Waren getSum();
    Funktion getSum() {
        Variablenanzahl = 0;
        var Geld = 0;
        $(".itxt").jedes(Funktion (i, ele) {
            zählen += parseInt($(ele).val());
        });
        $(".amount-sum em").text(Anzahl);
 
        $(".p-sum").jedes(Funktion (i, ele) {
            Geld += parseFloat($(ele).text().substr(1))
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

5. Produkte löschen

Produktmodulanalyse löschen:

  • Kernidee: Löschen Sie das Element einfach mit remove()
  • Zum Löschen stehen drei Möglichkeiten zur Verfügung: 1. Löschtaste hinter dem Produkt 2. Löschen des ausgewählten Produkts 3. Leeren des Warenkorbs
  • Der Löschbutton hinter dem Produkt: Er muss das aktuelle Produkt löschen, also beginnt er bei $(this)
  • Ausgewähltes Produkt löschen: Stellen Sie zunächst fest, ob das kleine Kontrollkästchen ausgewählt ist. Wenn es ausgewählt ist, löschen Sie das entsprechende Produkt.
  • Warenkorb aufräumen: Alle Artikel löschen.

Klicken Sie hinter einem Produkt刪除, um es zu löschen, klicken Sie darunter auf刪除選中的商品, um die im Kontrollkästchen ausgewählten Produkte zu löschen, und清理購物車um alle Produkte im Einkaufswagen zu löschen.

    // Löschen // Lösche das Element hinter $(".p-action a").click(function () {
        $(this).parents(".cart-item").entfernen();
        getSum();
    });
    // Ausgewählte Produkte löschen$(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    // Einkaufswagen leeren $(".clear-all").click(function () {
        $(".cart-item").entfernen();
        getSum();
    })

6. Fügen Sie ausgewählten Produkten einen Hintergrund hinzu

Wählen Sie das Produkt aus, um eine Hintergrundanalyse hinzuzufügen:

  • Kernidee: Hintergrund zu ausgewählten Produkten hinzufügen, Hintergrund entfernen, wenn nicht ausgewählt
  • Klicken Sie auf die Schaltfläche „Alles auswählen“. Wenn „Alles auswählen“ ausgewählt ist, werden allen Produkten Hintergründe hinzugefügt, andernfalls werden Hintergründe entfernt.
  • Klicken Sie auf das kleine Kontrollkästchen: Wenn es ausgewählt ist, wird der Hintergrund zum aktuellen Produkt hinzugefügt, andernfalls wird der Hintergrund entfernt
  • Dieser Hintergrund kann durch Klassennamen, Hinzufügen von Klassen und Löschen von Klassen geändert werden

Die Hintergrundfarbe wird hinzugefügt, wenn sie ausgewählt wird. Der Code hier sollte also für den Fall geschrieben werden, dass sich das Kontrollkästchen ändert.

    // Alles auswählen $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("aktiviert", $(this).prop("aktiviert"))
        // Dem Produkt Hintergrundfarbe hinzufügen if ($(this).prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } anders {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
 
    $(".j-checkbox").ändern(Funktion () {
        wenn ($(".j-checkbox:checked").Länge === $(".j-checkbox").Länge) {
            $(".checkall").prop("geprüft", true);
        } anders {
            $(".checkall").prop("geprüft", false);
        }
        // Dem Produkt Hintergrundfarbe hinzufügen if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } anders {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

7. Alle Kerncodes von HTML

<div Klasse="c-container">
        <div Klasse="w">
            <div Klasse="Warenkorb-Filterleiste">
                <em>Alle Produkte</em>
            </div>
            <!-- Hauptkernbereich des Einkaufswagens -->
            <div Klasse="Warenkorb-Warp">
                <!-- Header-Modul „Alle auswählen“ -->
                <div Klasse="cart-thead">
                    <div Klasse="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> Alles auswählen</div>
                    <div class="t-goods">Waren</div>
                    <div class="t-price">Stückpreis</div>
                    <div class="t-num">Menge</div>
                    <div class="t-sum">Zwischensumme</div>
                    <div class="t-action">Aktion</div>
                </div>
                <!-- Produktdetails-Modul-->
                <div Klasse="Warenkorb-Artikelliste">
                    <div Klasse="Warenkorb-Artikel Warenkorb-Artikel prüfen">
                        <div Klasse="p-checkbox">
                            <Eingabetyp="Checkbox" Name="" ID="" aktiviert Klasse="j-Checkbox">
                        </div>
                        <div Klasse="p-goods">
                            <div Klasse="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5 Bücher für 26,8 Yuan】Klassische Kinderliteratur, Farbillustrationen, Jugendversion von „In 80 Tagen um die Welt“, Lehrplan für Chinesischunterricht für Mittelschüler</div>
                        </div>
                        <div class="p-price">￥12,60</div>
                        <div Klasse="p-num">
                            <div Klasse="Mengenform">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="decrement">-</a>
                                <Eingabetyp="text" Klasse="itxt" Wert="1">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12,60</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Löschen</a></div>
                    </div>
                    <div Klasse="Warenkorb-Artikel">
                        <div Klasse="p-checkbox">
                            <Eingabetyp="Checkbox" Name="" ID="" Klasse="j-Checkbox">
                        </div>
                        <div Klasse="p-goods">
                            <div Klasse="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">[2000 Sticker] Stickerbuch 3-6 Jahre alt Sticker Kinder Stickerbuch Komplettset mit 12 Heften Sticker Kinder Auto</div>
                        </div>
                        <div class="p-price">￥24,80</div>
                        <div Klasse="p-num">
                            <div Klasse="Mengenform">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="decrement">-</a>
                                <Eingabetyp="text" Klasse="itxt" Wert="1">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24,80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Löschen</a></div>
                    </div>
                    <div Klasse="Warenkorb-Artikel">
                        <div Klasse="p-checkbox">
                            <Eingabetyp="Checkbox" Name="" ID="" Klasse="j-Checkbox">
                        </div>
                        <div Klasse="p-goods">
                            <div Klasse="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">Dreihundert Tang-Gedichte + Redewendungsgeschichten (2 Bände) Außerschulische Bücher für die erste Klasse, gebundene Phonetische Notation, Kinderausgabe, Außerschulische Lesebücher für die zweite und dritte Klasse für Grundschüler</div>
                        </div>
                        <div class="p-price">￥29,80</div>
                        <div Klasse="p-num">
                            <div Klasse="Mengenform">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="decrement">-</a>
                                <Eingabetyp="text" Klasse="itxt" Wert="1">
                                <a href="javascript:;" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29,80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Löschen</a></div>
                    </div>
                </div>
 
                <!-- Abrechnungsmodul-->
                <div Klasse="Warenkorb-Floatbar">
                    <div Klasse="alles auswählen">
                        <input type="checkbox" name="" id="" class="checkall">Alles auswählen</div>
                    <div Klasse="Operation">
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove-batch"> Ausgewählte Produkte löschen</a>
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="clear-all">Warenkorb leeren</a>
                    </div>
                    <div Klasse="Werkzeugleiste-rechts">
                        <div class="amount-sum"><em>1</em> Artikel wurde ausgewählt</div>
                        <div class="price-sum">Gesamtpreis: <em>￥12,60</em></div>
                        <div class="btn-area">Zur Kasse gehen</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>

Oben sehen Sie ein Beispiel, wie Sie mit jQuery alle Warenkorbfunktionen implementieren können. Ich hoffe, es ist hilfreich für Sie. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

Das könnte Sie auch interessieren:
  • jQuery realisiert die volle Funktion des Einkaufswagens
  • Implementierung eines Einkaufswagens mit jQuery
  • jQuery implementiert die Grundfunktionen des Warenkorbs
  • jQuery implementiert die Gesamtpreisberechnungs- und Gesamtpreisübertragungsfunktion des Warenkorbs

<<:  CSS setzt die Höhe des Box-Containers (div) immer auf 100 %

>>:  Eine detaillierte Erklärung der subtilen Unterschiede zwischen Readonly und Disabled

Artikel empfehlen

Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren

Kommentare und Nachrichten waren ursprünglich ein...

Implementierung von LNMP für die separate Bereitstellung von Docker-Containern

1. Umweltvorbereitung Die IP-Adresse jedes Contai...

So lösen Sie das Problem des verstümmelten MySQL-Inserts

Problembeschreibung: Beim Einfügen chinesischer Z...

Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)

Geschäftsszenario: Verwenden Sie den EL-Dialog vo...

Details zum Prototypmodus des Javascript-Entwurfsmusters

Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...

Tipps zum Mischen von OR und AND in SQL-Anweisungen

Heute gibt es eine solche Anforderung. Wenn die a...

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

Inhaltsverzeichnis 1. Ergebnisse erzielen 2. Impl...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 (Linux)

Dieser Artikel zeichnet das grafische Tutorial zu...

So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an

Folgen Sie dem offiziellen Tutorial, laden Sie da...

So entwickeln Sie Uniapp mit vscode

Da ich immer vscode zur Entwicklung von Front-End...

Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen

Layoutteil: <div id="Schieberegler"&...

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

Dieser Artikel zeichnet das Installations-Grafik-...

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Inhaltsverzeichnis Vorwort einführen 1. Wirkungsm...

So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet

Finden Sie das Problem Schauen wir uns zunächst d...

Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“

In Vue haben wir im Allgemeinen Front-End- und Ba...