JSは5つ星の賞賛効果を達成

「./Component.js」からコンポーネントをインポートします。
 
エクスポートデフォルトクラスStarsはComponenetを拡張します{
 
    ラベル;
    STARS_NUM = 5;
    スターArr = [];
    スコア = 0;
    スターコン;
    顔アイコン;
    スコアコン;
    インデックス = -1;
    名前;
    
    static STARS_LIST={}; // 現在のページに、グループごとに 1 つの製品ずつ、5 つ星のレビュー結果をすべて保存します。製品 ID をキーとして使用し、製品レビューを値として使用して配列を形成します。
    date=新しい日付();
 
    コンストラクター(_label,_name) {
        スーパー("div");
        this.name=_name;
        this.label = _label;
        オブジェクト.assign(this.elem.style, {
            幅:"200px",
            高さ: "16px",
            フロート: "左",
            右余白: "20px",
            marginBottom: "10px",
            フォントサイズ: "12px",
            色: "#666",
            行の高さ: "16px",
            ユーザー選択: "なし",
            位置: "相対的"、
            上: "20px",
            左: "20px",
        })
        // クッキーに保存されているレビュー結果を解析し、各レビューを作成するときにスコア値を初期化します。
        スコアを初期化します。
        // 評価ラベル部分を作成します this.createLabel();
        // 星の部分を作成します this.createStars();
        // スコア部分を作成します this.createScore();
        // 星のスタイルを初期化します。
        this.changeStarStyle(this.score-1);
        // スコアを初期化します this.changeScore(this.score);
        // マウスのロールオーバーとクリック イベントを追加します。
        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("click", e => this.clickHandler(e));
        2021年をフルイヤーに設定します。
    }
    _parent に付加する{
        super.appendTo(_parent);
        if(!Stars.STARS_LIST[this.name]) Stars.STARS_LIST[this.name]=[];
        Stars.STARS_LIST[this.name].push(this.label+"="+this.score);
    }
    クリックハンドラ(e){
        if(e.target.constructor!==HTMLLIElement) 戻り値
        this.index = this.starArr.indexOf(e.target);
        this.score = this.index+1;
        this.changeStarStyle(this.index);
        this.changeScore(this.index+1);
        // クリックするたびにコメントの結果が Cookie に保存され、次回ページを開いたときに読み取ることができるようになります。 STARS_LIST は、ラベルをキー、スコアを値としてデータを保存します。
        this.storageScore();
    }
    ストレージスコア(){
        for(let prop in Stars.STARS_LIST){
            if(prop === this.name){
                Stars.STARS_LIST[prop].forEach((item,index)=>{
                    if(item.includes(this.label)) Stars.STARS_LIST[prop][index] = this.label+"="+this.score;
                });
            }
        }
        document.cookie="comment="+ JSON.stringify(Stars.STARS_LIST)+";expires="+this.date.toUTCString();
    }
    マウスハンドラ(e) {
        スイッチ (e.type) {
            ケース「マウス入力」:
                this.faceIcon.style.display = "ブロック";
                壊す;
            ケース「マウスリーブ」:
                this.faceIcon.style.display = "なし";
                this.changeStarStyle(this.index);
                this.changeScore(this.score);
                壊す;
            ケース「マウスオーバー」:
                index = this.starArr.indexOf(e.target); とします。
                this.changeStarStyle(インデックス);
                this.changeScore(インデックス + 1);
                this.changeFaceStyle(インデックス);
                壊す;
        }
    }
    星のスタイルを変更します(_i) {
        (n = 0; n < this.starArr.length; n++ とします) {
            n <= _i || n < this.score の場合 {
                this.starArr[n].style.backgroundPositionY = "-16px";
            } それ以外 {
                this.starArr[n].style.backgroundPositionY = "0px";
            }
        }
    }
    フェイススタイルを変更する(_i) {
        this.faceIcon.style.left = _i * 16 + "px";
        this.faceIcon.style.backgroundPositionX = (_i + 1) * 20 + "px";
    }
    スコア変更(_i) {
        this.scoreCon.textContent = _i + "ポイント";
    }
    ラベルを作成します（）{
        label = document.createElement("span"); とします。
        オブジェクト.assign(ラベル.style, {
            フロート: "左",
            パディング: "0 5px",
        })
        ラベルのテキストコンテンツ = this.label;
        this.elem.appendChild(ラベル);
    }
    スターを作成します（）{
        this.starsCon = document.createElement("ul");
        オブジェクト.assign(this.starsCon.style, {
            マージン: 0,
            パディング: 0,
            リストスタイル: "なし",
            幅: "80px",
            高さ: "16px",
            フロート: "左",
            位置: "相対的"、
        })
        (i = 0 とします; i < this.STARS_NUM; i++) {
            li = document.createElement("li"); とします。
            オブジェクト.assign(li.style, {
                幅: "16px",
                高さ: "16px",
                フロート: "左",
                背景画像: "url(./star_img/commstar.png)",
            })
            this.starArr.push(li);
            this.starsCon.appendChild(li);
        }
        this.faceIcon = document.createElement("div");
        オブジェクト.assign(this.faceIcon.style, {
            幅: "16px",
            高さ: "16px",
            背景画像: "url(./star_img/face-red.png)",
            背景位置X: "-80px",
            位置: "絶対"、
            左: "0",
            上: "-16px",
            表示: "なし",
        })
        this.starsCon.appendChild(this.faceIcon);
        this.elem.appendChild(this.starsCon);
    }
    スコアを作成する() {
        this.scoreCon = document.createElement("div");
        オブジェクト.assign(this.scoreCon.style, {
            高さ: "16px",
            幅:"20px",
            フロート: "左",
            パディング: "0 5px",
        })
        this.scoreCon.textContent = this.score + "分",
        this.elem.appendChild(this.scoreCon);
    }
    初期化スコア(){
        // クッキーを直接読み取って次のように表示します // comment={"1001":["製品の適合性=5","ショップのサービス態度=0","速達速度=0","宅配便サービス=0","速達梱包=0"],"1002":["製品の適合性=0","ショップのサービス態度=0","速達速度=0","宅配便サービス=0","速達梱包=0"]}
 
        // クッキーに保存されたコメント結果を解析します。
        if(!document.cookie.includes("comment=")) 戻り値
        o = JSON.parse(document.cookie.match(/(\{.*?\})/)[1]); とします。
        if(!o) 戻り値
        // 解析された o は次のようになります // ["製品の適合性=1", "ショップのサービス態度=0", "速達速度=0", "宅配便サービス=0", "速達梱包=0"]
        for(let prop in o){
            if(this.name===prop){
                this.score=o[prop].reduce((値,項目,インデックス)=>{
                    arr = item.split("="); とします。
                    arr[0]にthis.labelが含まれている場合、値はarr[1]のparseIntになります。
                    戻り値;
                },0)
            }
        }
    }
}

'./js/Stars.js' から Stars をインポートします。
let list=["製品の適合性","店主のサービス態度","速達スピード","宅配便サービス","速達梱包"];
 
        // star = new Stars(list[0]);
        // star.appendTo("body");
 
        リスト.forEach(item=>{
            // ラベルと対応する商品IDを渡す
            スター = new Stars(item,"1001");
            星を追加します。(".div1");
        })
        リスト.forEach(item=>{
            スター = new Stars(item,"1002");
            star.appendTo(".div2");
        })