Native js implementiert Warenkorb-Logik und -Funktionen

// Feststellen, ob der Benutzer angemeldet ist var username = getCookie("username");
//Wenn die Anmeldung erfolgreich ist, führen Sie diesen Code aus, if(Benutzername){
    var vip = $(`<a href='javascript:;'>Willkommen <b>${username}</b> im Tmall Supermarket</a>`)
    var loginout = $(`<a href='javascript:;' class="loginout">Abmelden</a>`)
    $(".hLeft").leer()
    $(".hLeft").anhängen(vip)
    $(".hLeft").anhängen(loginout)
    $(".hLeft>a").css({
        "Farbe":"#666",
        "Zeilenhöhe": "32px",
        "Rand links": "10px"
    })
    $(".hLeft>a>b").css({
        "Farbe": "rot",
        "Schriftgewicht": "800",
    })
    $(".loginout").klick(function(){
        removeCookie("Benutzername")
        $(".hLeft").leer()
        $(".hLeft").html(` <a href="home.html" >Tmall-Startseite</a>
        <a href="javascript:;" >Miau, willkommen bei Tmall</a>
        <a href="login.html" >Bitte loggen Sie sich ein</a>
        <a href="register-test.html" >Kostenlose Registrierung</a>`)
    })
}anders{
    alert("Bitte melden Sie sich zuerst an");
    Standort.Zuweisen("./login.html");
}

// Daten von der Detailseite empfangen // Zuerst feststellen, ob ein Produkt im lokalen Speicher vorhanden ist var data = localStorage.getItem("cart");
wenn(!data){
    $(".page-con").leer();
    var str = "";
    str +=`<h2>Der Warenkorb ist leer! ! ! </h2>
    <p>Bitte wechseln Sie schnell zur Listenseite und wählen Sie das Produkt aus, um <p><a href="./list.html" >die Listenseite aufzurufen</a>
    `
    $(".page-con").html(str);
    $(".page-con").css({width:"900px",margin:"40px auto 0"});
    $(".page-con h2").css({Schriftgröße:"50px",Farbe:"blau",Zeilenhöhe:"80px"})
    $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
    $(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}anders{
    // Dann feststellen, ob der Einkaufswagen des aktuellen Benutzers Daten sind // Die Daten in einen Array-Typ konvertieren data = JSON.parse(data);
    // Prüfen, ob die Daten vorhanden sind for(var j=0;j<data.length;j++){}
    var res = Daten.einige(v=>{
        return v.username == Benutzername;
    })
    wenn(!res){
        $(".page-con").leer();
        var str = "";
        str +=`<h2>Der Warenkorb ist leer! ! ! </h2>
        <p>Bitte wechseln Sie schnell zur Listenseite und wählen Sie das Produkt aus, um <p><a href="./list.html" >die Listenseite aufzurufen</a>
        `
        $(".page-con").html(str);
        $(".page-con").css({width:"900px",margin:"40px auto 0"});
        $(".page-con h2").css({Schriftgröße:"50px",Farbe:"blau",Zeilenhöhe:"80px"})
        $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
        $(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
    }anders{
        // Es sind Daten vorhanden und sie haben ihre eigenen Daten // Finde zuerst deine eigenen Daten heraus var arr = data.filter(v=>v.username == username);
        // Die erfassten Daten durchlaufen // Im Array sind keine gewünschten Produktdaten vorhanden, daher müssen Sie diese aus der Datenbank abrufen und in der Datenbank nach Daten anhand der ID suchen. var ids = arr.map(v=>v.goodsid);
        
        ids = ids.beitreten(",")

$.ajax({
            URL: "./server/cart.php",
            Datentyp: „json“,
            Daten: {ids:ids},
            Typ: „get“,
            Erfolg:res=>{
                var str = '';
                für(var i=0;i<res.length;i++){
                    // Ermitteln Sie für jedes Element in res[i] die Nummer von arrvar number = arr.find(v=>v.goodsid==res[i].id).number;
                    
                    str +=`
                        <div Klasse="SeiteMtop">
                            <input type="checkbox" name="onetop"><i></i><span>Geschäft: ${res[i].name}</span><em></em>
                        </div>
                        <div Klasse="Seiteninhalt">
                            <h3><img src="images/cat10.png">8,6 0 Uhr, alle 300 minus 30</h3>
                            <ul>
                                <li>
                                    <Eingabetyp="Kontrollkästchen" Name="eins">
                                </li>
                                <li>
                                    <a href="">
                                        <img src="${res[i].imgpath}">
                                    </a>
                                </li>
                                <li>
                                    <p>
                                        <a href="#" >${res[i].introduce}</a>
                                    </p>
                                    <img src="images/cat03.png" alt="">
                                    <a href="javascript:;" ><img src="images/cat04.png" alt=""></a>
                                </li>
                                <li>
                                    <p>Größe: M</p>
                                    <p>Hauptfarben: 6685 Weiß + 6691 Dunstblau (Vorverkaufsstart für Größe M ist der 8. August)</p>
                                    <a href="#" >Bearbeiten</a>
                                </li>
                                <li>
                                    <span>${res[i].preis}</span>
                                </li>
                                <li Klasse="Datenname" Daten-ID = "${res[i].id}">
                                <Eingabetyp="Schaltfläche" Klasse="Reduzieren" Wert="-">
                                <input Klasse="Nummereins" Typ="Nummer" Name="Nummer" Datenbestand="${res[i].stock}" Wert="${Nummer}">
                                <Eingabetyp="Schaltfläche" Klasse="Hinzufügen" Wert="+">
                                </li>
                                <li Klasse="Zwischensumme">
                                    ${res[i].Preis*Zahl}
                                </li>
                                <li>
                                    <p>In Ordner verschieben</p>
                                    <p class="btn">Löschen</p>
                                    <p>Baby</p>
                                </li>
                            </ul>
                        </div>
                    `
                }
                $(".page-middle").html(str)
                 //Füge hier die Funktion „Alles auswählen“ ein // Wenn du sie hier schreibst, wird der Code zu tief verschachtelt – schreibe die Funktion außerhalb und rufe sie dann hier auf //Rufe die Funktion „Alles auswählen“ auf selectAll()
                //Rufen Sie die Einzelauswahlfunktion selectone() auf.
                // Gesamtpreis und Gesamtmenge berechnen priceAndNumberAll()
                // Mengen addieren und subtrahieren addAndReduce()
                // Klicken Sie auf die Entf-Taste removebtn()
            }
        })
    }

//Alles auswählen Funktion function selectAll(){
    // Ereignisse an obere und untere Auswahl binden $("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
        // Den Status der Einzelauswahl festlegen $("[name='one']").prop("checked",$(this).prop("checked"))
        $("[name='onetop']").prop("aktiviert",$(this).prop("aktiviert"))
        // Alle Auswahlen zu beiden Kontrollkästchen hinzufügen $("[name='topAll']").prop("checked",$(this).prop("checked"))
        $("[name='footAll']").prop("aktiviert",$(this).prop("aktiviert"))
        PreisUndAnzahlAlle()
    }
}

// Einzelauswahlfunktion function selectone(){
    $("[name='one']").klick(function(){
        // Prüfen, ob alle aktiviert sind //$("[name='one']") ist ein Pseudo-Array. Sie können nicht zuerst Array-Methoden aufrufen, um es in ein Array umzuwandeln $("[name='onetop']").prop("checked",$(this).prop("checked"))
        var arr = Array.prototype.slice.call($("[name='one']"))
        // Rufe die Methode „every“ auf und gib „false“ zurück, wenn keine ausgewählt ist
        var res = arr.every(v=>$(v).prop("geprüft"));
        wenn(res){
            $("[name='topAll']").prop("aktiviert","aktiviert");
            $("[name='onetop']").prop("aktiviert","aktiviert");
            $("[name='footAll']").prop("aktiviert","aktiviert");
        }anders{
            $("[name='topAll']").prop("aktiviert",falsch);
            $("[name='footAll']").prop("aktiviert",falsch)
        }
        Preis und Anzahl aller Zahlen ()
    })
}

// Gesamtpreis und Gesamtmenge berechnen Funktion priceAndNumberAll(){
    // Berechnung auf Basis des ausgewählten Felds // Auswahl der ausgewählten Zahl
    var allNumInput = $("[name='eins']:geprüft").parent().geschwister(".data-name").find("[name='Nummer']")
    var alleNum = 0;
    alleNumInput.jeweils(Funktion(k,v){
        alleNum += v.Wert-0;
    })
    $(".allnumber").text(alleNummer);
    var allPriceEle = $("[name=one]:geprüft").parent().siblings(".subtotal")
    var allePreise = 0;
    allePreisEle.jeweils(Funktion(k,v){
        allePreise += allePreiseEle.text()-0;
    })
    $(".allprice").text(allPrice);
}

// Klicken Sie auf Addition und Subtraktion, um Mengen zu addieren oder zu subtrahieren Funktion addAndReduce(){
    // Klicken Sie auf die Schaltfläche „Hinzufügen“ $(".add").click(function(){
        // Holen Sie sich zuerst den Wert im Eingabefeld var num = $(this).prev().val()-0;
        // Bei jedem Klick ist der Wert in der Eingabe ++
        Zahl++
        // Daten können nicht drahtlos hinzugefügt werden. Wenn der Maximalwert erreicht wird, werden sie nicht hinzugefügt, if (num>=$(this).prev().attr("data-stock")-0) {
            num=$(this).prev().attr("Datenbestand")-0
            $(this).prop("deaktiviert",true);
            $(diese).addClass("bgadd");
            $(this).prev().prev().prop("deaktiviert",false);
        }anders{
            $(this).prop("deaktiviert",false);
            $(diese).prev().prev().removeClass("bgreduce");
        }
        $(diese).prev().val(num)
        // Preis im Zwischenergebnis berechnen // Bezeichnung und Wert für den Stückpreis suchen var price = $(this).parent().prev().find("span").text()-0;
        // Zwischensumme neu berechnen var subtotal = price*num;
        // Nachdem die Zwischensumme berechnet wurde, wird sie im Speicher abgelegt td $(this).parent().next().text(subtotal);
        // Lokalen Speicher zurücksetzen // Lokale Speicherdaten abrufen var data = localStorage.getItem("cart");
        // In Array konvertieren data = JSON.parse(data);
        // Das Array durchlaufen, um die Daten zu finden, die die Bedingungen im Array erfüllen. var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));
        Objekt.Nummer = Nummer;
        localStorage.setItem("Warenkorb",JSON.stringify(Daten))
        Preis und Anzahl aller Zahlen ()
    })
    $(".reduce").klick(function(){
        // Holen Sie sich zuerst den Wert im Eingabefeld var num = $(this).next().val()-0;
        // Bei jedem Klick ist der Wert in der Eingabe ++
        Nummer --
        // Daten können nicht drahtlos hinzugefügt werden. Wenn der Maximalwert erreicht wird, werden sie nicht hinzugefügt if (num < 1) {
            Zahl=1;
            $(this).prop("deaktiviert",true);
            $(diese).addClass("bgreduce");
            $(this).next().next().prop("deaktiviert",false)
        }anders{
            $(this).prop("deaktiviert",false);
            : $(this).next().next().removeClass("bgadd");
        }
        $(diese).nächste().val(num)
        
        var Preis = $(this).parent().prev().find("span").text()-0;
        // Zwischensumme neu berechnen var subtotal = price*num;
        // Nachdem die Zwischensumme berechnet wurde, wird sie im Speicher abgelegt td $(this).parent().next().text(subtotal);
        // Die Daten wieder im lokalen Speicher speichern var data = localStorage.getItem("cart");
        Daten = JSON.parse(Daten);
        // Finde die Daten, die die Anforderungen erfüllen var obj = data.find(v=>{
            return v.username==Benutzername&&v.goodsid==$(this).parent().attr("data-id");
        })
        Objekt.Nummer = Nummer;
        localStorage.setItem("Warenkorb",JSON.stringify(Daten));
        PreisUndAnzahlAlle()
    })
}

//Klicken, um die Funktion zu löschen function removebtn(){
    // Klickereignis $(".btn").click(function(){
        // Abfrage, ob gelöscht werden soll if(!confirm("Sind Sie sicher, dass Sie löschen möchten")){
            gibt false zurück;
        }
        // Löschen Sie die lokal gespeicherten Daten var data = localStorage.getItem("cart");
        Daten = JSON.parse(Daten);
        var index = data.findIndex(function(v){
            v.username==Benutzername&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")
        });
        Daten.spleißen(Index,1);
        localStorage.setItem("Warenkorb",JSON.stringify(Daten))
        var tr = $(diese).parent().parent();
        tr.entfernen()
        wenn(!data.filter(v=>v.username==username).length){
            // Wenn keine Daten vorhanden sind, wird die Tabelle nicht angezeigt $(".page-middle").empty();
            // Seite soll benutzerdefinierten Inhalt anzeigen var str = "";
            str += `<h2>Der Warenkorb ist leer! ! ! </h2>
        <p>Bitte wechseln Sie schnell zur Listenseite und wählen Sie das Produkt aus, um <p><a href="./list.html" >die Listenseite aufzurufen</a>
        `
        $(".page-middle").html(str);
        $(".page-middle").css({width:"1200px",margin:"40px auto 0"});
        $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
        }

    })
}