JS erzielt Fünf-Sterne-Lobeffekt

importiere Componentet aus "./Component.js";
 
exportiere Standardklasse Stars erweitert Component {
 
    Etikett;
    STERNE_ANZAHL = 5;
    SternArr = [];
    Punktzahl = 0;
    SterneCon;
    Gesichtssymbol;
    PunktzahlCon;
    Index = -1;
    Name;
    
    static STARS_LIST={}; //Alle Fünf-Sterne-Bewertungsergebnisse auf der aktuellen Seite speichern, ein Produkt pro Gruppe. Verwenden Sie die Produkt-ID als Schlüssel und die Produktbewertungen, um ein Array als Wert zu bilden.
    Datum=neues Datum();
 
    Konstruktor(_label,_name) {
        super("div");
        dies.name=_name;
        dies.label = _label;
        Objekt.zuweisen(this.elem.style, {
            Breite: "200px",
            Höhe: "16px",
            float: "links",
            marginRight: "20px",
            Rand unten: "10px",
            Schriftgröße: "12px",
            Farbe: "#666",
            Zeilenhöhe: "16px",
            Benutzerauswahl: "keine",
            Position: "relativ",
            oben: "20px",
            links: "20px",
        })
        // Analysieren Sie die im Cookie gespeicherten Bewertungsergebnisse und initialisieren Sie den Bewertungswert beim Erstellen jeder Bewertung.
        dies.initScore();
        // Den Bewertungsbeschriftungsteil erstellen this.createLabel();
        // Den Teil mit den Sternen erstellen this.createStars();
        //Erstellen Sie den Punkteteil this.createScore();
        // Initialisieren Sie den Sternstil.
        dies.changeStarStyle(dieses.score-1);
        // Punktzahl initialisieren this.changeScore(this.score);
        //Maus-Rollover- und Klickereignisse hinzufügen.
        this.starsCon.addEventListener("mouseenter", e => this.mouseHandler(e));
        this.starsCon.addEventListener("mouseleave", e => this.mouseHandler(e));
        this.starsCon.addEventListener("mouseover", e => this.mouseHandler(e));
        this.starsCon.addEventListener("klicken", e => this.clickHandler(e));
        dieses.date.setFullYear(2021);
    }
    anhängenAn(_parent){
        super.appendTo(_parent);
        wenn(!Stars.STARS_LIST[dieser.name]) Stars.STARS_LIST[dieser.name]=[];
        Sterne.STARS_LIST[dieser.name].push(dieses.label+"="+dieser.score);
    }
    KlickHandler(e){
        wenn(e.target.constructor!==HTMLLIElement) return
        dies.index = dies.starArr.indexOf(e.target);
        dieser.Score = dieser.Index+1;
        dies.changeStarStyle(dieser.index);
        dies.changeScore(dieses.index+1);
        // Bei jedem Klick wird das Ergebnis des Kommentars im Cookie gespeichert, sodass es beim nächsten Öffnen der Seite gelesen werden kann. STARS_LIST speichert Daten mit Label als Schlüssel und Score als Wert.
        dies.storageScore();
    }
    Speicherscore(){
        für (let-Eigenschaft in Stars.STARS_LIST) {
            wenn(prop === dieser.name){
                Sterne.STARS_LIST[prop].forEach((item,index)=>{
                    wenn (item.includes(this.label)) Sterne.STARS_LIST[prop][index] = this.label+"="+this.score;
                });
            }
        }
        document.cookie="comment="+ JSON.stringify(Stars.STARS_LIST)+";expires="+this.date.toUTCString();
    }
    MausHandler(e) {
        Schalter (e.Typ) {
            Fall "mouseenter":
                this.faceIcon.style.display = "Block";
                brechen;
            Fall "Mausblatt":
                this.faceIcon.style.display = "keine";
                dies.changeStarStyle(dieser.index);
                dies.changeScore(dieses.score);
                brechen;
            Fall „Mouseover“:
                let index = this.starArr.indexOf(e.target);
                dies.changeStarStyle(index);
                dies.changeScore(index + 1);
                dies.changeFaceStyle(index);
                brechen;
        }
    }
    ändereSternstil(_i) {
        für (lass n = 0; n < this.starArr.length; n++) {
            wenn (n <= _i || n < dieser.Score) {
                this.starArr[n].style.backgroundPositionY = "-16px";
            } anders {
                this.starArr[n].style.backgroundPositionY = "0px";
            }
        }
    }
    ändereGesichtsstil(_i) {
        dieses.faceIcon.style.left = _i * 16 + "px";
        this.faceIcon.style.backgroundPositionX = (_i + 1) * 20 + "px";
    }
    änderePunktzahl(_i) {
        this.scoreCon.textContent = _i + "Punkte";
    }
    Label erstellen() {
        let label = document.createElement("span");
        Objekt.zuweisen(Beschriftung.Stil, {
            float: "links",
            Polsterung: "0 5px",
        })
        label.textinhalt = dieses.label;
        dies.elem.appendChild(Bezeichnung);
    }
    erstelleSterne() {
        this.starsCon = document.createElement("ul");
        Objekt.assign(this.starsCon.style, {
            Rand: 0,
            Polsterung: 0,
            Listenstil: "keine",
            Breite: "80px",
            Höhe: "16px",
            float: "links",
            Position: "relativ",
        })
        für (lass i = 0; i < this.STARS_NUM; i++) {
            let li = document.createElement("li");
            Objekt.assign(li.style, {
                Breite: "16px",
                Höhe: "16px",
                float: "links",
                Hintergrundbild: "url(./star_img/commstar.png)",
            })
            dies.starArr.push(li);
            dies.starsCon.appendChild(li);
        }
        dies.faceIcon = document.createElement("div");
        Objekt.zuweisen(this.faceIcon.style, {
            Breite: "16px",
            Höhe: "16px",
            Hintergrundbild: "url(./star_img/face-red.png)",
            HintergrundPositionX: "-80px",
            Position: "absolut",
            links: "0",
            oben: "-16px",
            Anzeige: "keine",
        })
        dies.starsCon.appendChild(dieses.faceIcon);
        dies.elem.appendChild(dies.starsCon);
    }
    erstelleScore() {
        dies.scoreCon = document.createElement("div");
        Objekt.zuweisen(this.scoreCon.style, {
            Höhe: "16px",
            Breite: "20px",
            float: "links",
            Polsterung: "0 5px",
        })
        this.scoreCon.textContent = this.score + "Text",
        dies.elem.appendChild(dies.scoreCon);
    }
    initScore(){
        // Lesen Sie das Cookie direkt, um es wie folgt anzuzeigen // Kommentar = {"1001": ["Produktkonformität = 5","Shop-Service-Einstellung = 0","Express-Liefergeschwindigkeit = 0","Kurierdienst = 0","Express-Verpackung = 0"],"1002": ["Produktkonformität = 0","Shop-Service-Einstellung = 0","Express-Liefergeschwindigkeit = 0","Kurierdienst = 0","Express-Verpackung = 0"]}
 
        // Analysieren Sie die im Cookie gespeicherten Kommentarergebnisse.
        wenn(!document.cookie.includes("comment=")) return
        lass o = JSON.parse(document.cookie.match(/(\{.*?\})/)[1]);
        wenn(!o) zurückgeben
        // Das analysierte o lautet wie folgt // ["Produktkonformität=1", "Shop-Service-Einstellung=0", "Express-Liefergeschwindigkeit=0", "Kurierdienst=0", "Express-Verpackung=0"]
        für (let prop in o) {
            wenn(dieser.name===prop){
                this.score=o[prop].reduce((Wert,Element,Index)=>{
                    lass arr = item.split("=");
                    wenn(arr[0].includes(this.label)) Wert=parseInt(arr[1]);
                    Rückgabewert;
                },0)
            }
        }
    }
}

importiere Sterne aus „./js/Stars.js“;
let list=["Produktkonformität","Serviceeinstellung des Ladenbesitzers","Express-Liefergeschwindigkeit","Kurierdienst","Express-Verpackung"];
 
        // lass Stern = neue Sterne(Liste[0]);
        // Stern.appendTo("body");
 
        Liste.fürJeden(Element=>{
            // Geben Sie das Label und die entsprechende Produkt-ID ein
            let star = neue Sterne(Artikel,"1001");
            Stern.appendTo(".div1");
        })
        Liste.fürJeden(Element=>{
            let star = neue Sterne(Artikel,"1002");
            Stern.appendTo(".div2");
        })