ネイティブjsはショッピングカートのロジックと機能を実装します

// ユーザーがログインしているかどうかを判断します var username = getCookie("username");
//ログインが成功したら、このコードを実行します if(username){
    var vip = $(`<a href='javascript:;'>ようこそ <b>${username}</b>、Tmall Supermarket へ</a>`)
    var loginout = $(`<a href='javascript:;' class="loginout">ログアウト</a>`)
    $(".hLeft").空()
    $(".hLeft").append(vip)
    $(".hLeft").append(ログインアウト)
    $(".hLeft>a").css({
        "色":"#666",
        "行の高さ":"32px",
        "左余白":"10px"
    })
    $(".hLeft>a>b").css({
        "色":"赤",
        "フォントの太さ":"800",
    })
    $(".loginout").click(function(){
        removeCookie("ユーザー名")
        $(".hLeft").空()
        $(".hLeft").html(` <a href="home.html" >Tmallホームページ</a>
        <a href="javascript:;" >ニャー、Tmall へようこそ</a>
        <a href="login.html" >ログインしてください</a>
        <a href="register-test.html" >無料登録</a>`)
    })
}それ以外{
    alert("まずログインしてください");
    場所を割り当てます("./login.html");
}

// 詳細ページからデータを受信します // まず、ローカル ストレージに製品があるかどうかを判断します var data = localStorage.getItem("cart");
if(!データ){
    $(".page-con").empty();
    var str = "";
    str +=`<h2>ショッピングカートは空です! ！ ！ </h2>
    <p>すぐにリストページに移動して製品を選択し、<p><a href="./list.html" >リストページに入ります</a>
    `
    $(".page-con").html(str);
    $(".page-con").css({幅:"900px",マージン:"40px 自動 0"});
    $(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
    $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
    $(".page-con a").css({幅:"100px",高さ:"40px",背景:"スカイブルー",上マージン:"20px",表示:"ブロック"})
}それ以外{
    // 次に、現在のユーザーのショッピング カートがデータであるかどうかを判断します // データを配列型に変換します data = JSON.parse(data);
    // データが存在するかどうかを確認します for(var j=0;j<data.length;j++){}
    var res = data.some(v=>{
        v.username == username を返します。
    })
    if(!res){
        $(".page-con").empty();
        var str = "";
        str +=`<h2>ショッピングカートは空です! ！ ！ </h2>
        <p>すぐにリストページに移動して製品を選択し、<p><a href="./list.html" >リストページに入ります</a>
        `
        $(".page-con").html(str);
        $(".page-con").css({width:"900px",margin:"40px auto 0"});
        $(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
        $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
        $(".page-con a").css({幅:"100px",高さ:"40px",背景:"スカイブルー",上マージン:"20px",表示:"ブロック"})
    }それ以外{
        // データがあり、そのデータには独自のデータがあります // まず独自のデータを見つけます var arr = data.filter(v=>v.username == username);
        // 取得したデータを走査します // 配列には目的の製品データがないため、データベースから取得し、ID でデータベース内のデータを検索する必要があります var ids = arr.map(v=>v.goodsid);
        
        ids = ids.join(",")

$.ajax({
            URL:"./server/cart.php",
            データ型:"json",
            データ:{ids:ids},
            タイプ:"取得",
            成功:res=>{
                var str = '';
                (var i=0;i<res.length;i++){
                    // res[i] の各項目に従って、arrvar number = arr.find(v=>v.goodsid==res[i].id).number から番号を検索します。
                    
                    str +=`
                        <div class="pageMtop">
                            <input type="checkbox" name="onetop"><i></i><span>ストア: ${res[i].name}</span><em></em>
                        </div>
                        <div class="pageMcontent">
                            <h3><img src="images/cat10.png">8.6 0時、300マイナス30毎</h3>
                            <ul>
                                <li>
                                    <input type="チェックボックス" name="one">
                                </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>サイズ: M</p>
                                    <p>メインカラー：6685 ホワイト＋6691 ヘイズブルー（Mサイズ先行発売は8月8日発売予定）</p>
                                    <a href="#" >編集</a>
                                </li>
                                <li>
                                    <span>${res[i].price}</span>
                                </li>
                                <li class="データ名" データID = "${res[i].id}">
                                <input type="button" class="reduce" value="-">
                                <input class="numberone" type="number" name="number" data-stock="${res[i].stock}" value="${number}">
                                <input type="button" class="add" value="+">
                                </li>
                                <li class="subtotal">
                                    ${res[i].価格*数値}
                                </li>
                                <li>
                                    <p>フォルダに移動</p>
                                    <p class="btn">削除</p>
                                    <p>赤ちゃん</p>
                                </li>
                            </ul>
                        </div>
                    `
                }
                $(".page-middle").html(str)
                 //ここにすべて選択関数を追加します //ここに記述すると、コードが深くネストされすぎてしまいます - 関数を外側に記述してから、ここで関数を呼び出します //すべて選択関数 selectAll() を呼び出します
                //単一選択関数selectone()を呼び出す
                // 合計価格と合計数量を計算する priceAndNumberAll()
                // 数量を加算および減算する addAndReduce()
                // 削除キーをクリックするremovebtn()
            }
        })
    }

//すべて選択関数 function selectAll(){
    // 上部と下部の選択の両方にイベントをバインドします $("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
        // 単一選択の状態を設定します $("[name='one']").prop("checked",$(this).prop("checked"))
        $("[name='onetop']").prop("チェック済み",$(this).prop("チェック済み"))
        // 両方のチェックボックスにすべての選択を追加します $("[name='topAll']").prop("checked",$(this).prop("checked"))
        $("[name='footAll']").prop("チェック済み",$(this).prop("チェック済み"))
        価格と数値すべて()
    }
}

// 単一選択関数 function selectone(){
    $("[name='one']").click(function(){
        // すべてがチェックされているかどうかを確認します //$("[name='one']") は疑似配列であるため、最初に配列メソッドを呼び出して配列に変換することはできません $("[name='onetop']").prop("checked",$(this).prop("checked"))
        var arr = Array.prototype.slice.call($("[name='one']"))
        // every メソッドを呼び出し、選択されていない場合は false を返します
        var res = arr.every(v=>$(v).prop("checked"));
        if(res){
            $("[name='topAll']").prop("チェック済み","チェック済み");
            $("[name='onetop']").prop("チェック済み","チェック済み");
            $("[name='footAll']").prop("チェック済み","チェック済み");
        }それ以外{
            $("[name='topAll']").prop("チェック済み",false);
            $("[name='footAll']").prop("チェック済み",false)
        }
        価格と数値すべて()
    })
}

// 合計価格と合計数量を計算する function priceAndNumberAll(){
    // 選択したボックスに基づいて計算する // 選択した数値を選択する
    var allNumInput = $("[name='one']:checked").parent().siblings(".data-name").find("[name='number']")
    var allNum = 0;
    allNumInput.each(関数(k,v){
        allNum += v.value-0;
    })
    $(".allnumber").text(allNum);
    var allPriceEle = $("[name=one]:checked").parent().siblings(".subtotal")
    var allPrice = 0;
    allPriceEle.each(function(k,v){
        allPrice += allPriceEle.text()-0;
    })
    $(".allprice").text(allPrice);
}

// 加算と減算をクリックして数量を加算または減算します function addAndReduce(){
    // 追加ボタンをクリックします $(".add").click(function(){
        // まず入力ボックスの値を取得します var num = $(this).prev().val()-0;
        // クリックするたびに、入力の値は ++ になります
        数値++
        // ワイヤレスでデータを追加することはできません。最大値に達した場合は追加されません if (num>=$(this).prev().attr("data-stock")-0) {
            num=$(this).prev().attr("データストック")-0
            $(this).prop("無効",true);
            $(this).addClass("bgadd");
            $(this).prev().prev().prop("無効",false);
        }それ以外{
            $(this).prop("無効",false);
            $(this).prev().prev().removeClass("bgreduce");
        }
        $(this).prev().val(num)
        // 小計の価格を計算します // 単価のラベルと値を見つけます var price = $(this).parent().prev().find("span").text()-0;
        // 小計を再計算します var subtotal = price*num;
        // 小計を計算した後、それをストレージ td に格納します $(this).parent().next().text(subtotal);
        // ローカルストレージをリセットします // ローカルストレージデータを取得します var data = localStorage.getItem("cart");
        // 配列に変換 data = JSON.parse(data);
        // 配列を走査して、配列内の条件を満たすデータを検索します。 var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(データ))
        価格と数値すべて()
    })
    $(".reduce").click(function(){
        // まず入力ボックスの値を取得します var num = $(this).next().val()-0;
        // クリックするたびに、入力の値は ++ になります
        番号 --
        // データはワイヤレスで追加できません。最大値に達した場合は追加されません if (num < 1) {
            数値=1;
            $(this).prop("無効",true);
            $(this).addClass("bgreduce");
            $(this).next().next().prop("無効",false)
        }それ以外{
            $(this).prop("無効",false);
            $(this).next().next().removeClass("bgadd");
        }
        $(this).next().val(数値)
        
        var price = $(this).parent().prev().find("span").text()-0;
        // 小計を再計算します var subtotal = price*num;
        // 小計を計算した後、それをストレージ td に格納します $(this).parent().next().text(subtotal);
        // データをローカルストレージに保存します var data = localStorage.getItem("cart");
        データ = JSON.parse(データ);
        // 要件を満たすデータを検索する var obj = data.find(v=>{
            v.username==username&&v.goodsid==$(this).parent().attr("data-id"); を返します。
        })
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(data));
        価格と数値すべて()
    })
}

//クリックして削除する関数 function removebtn(){
    // クリックイベント $(".btn").click(function(){
        // 削除するかどうかを尋ねる if(!confirm("本当に削除しますか")){
            false を返します。
        }
        // ローカルに保存されたデータを削除します var data = localStorage.getItem("cart");
        データ = JSON.parse(データ);
        var インデックス = data.findIndex(function(v){
            v.username==ユーザー名&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")
        });
        data.splice(インデックス,1);
        localStorage.setItem("cart",JSON.stringify(データ))
        var tr = $(this).parent().parent();
        tr.削除()
        if(!data.filter(v=>v.username==username).length){
            // データがない場合、テーブルは表示されません $(".page-middle").empty();
            // ページにカスタムコンテンツを表示させます var str = "";
            str += `<h2>ショッピングカートは空です! ！ ！ </h2>
        <p>すぐにリストページに移動して製品を選択し、<p><a href="./list.html" >リストページに入ります</a>
        `
        $(".page-middle").html(str);
        $(".page-middle").css({width:"1200px",margin:"40px auto 0"});
        $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
        }

    })
}