功能不全的购物车(json)

最新推荐文章于 2023-05-11 21:20:45 发布
fanrax
最新推荐文章于 2023-05-11 21:20:45 发布
阅读量227
点赞数
分类专栏： jsdemo 文章标签：功能不全的购物车(json)
本文链接：https://blog.csdn.net/qq_41925937/article/details/80834151
版权
jsdemo 专栏收录该内容
35 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #shop_all>section{
            /*height:200px;*/
            width:600px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<div id="shop_all"></div>

<input type="button" value="删除" id="del">总价:
<span id="all"></span>
<!--<section>-->
    <!--<p></p>-->
    <!--<div>-->
        <!--<input type="checkbox">-->
        <!--<span></span>-->
        <!--<span></span>-->
        <!--<input type="button" value="-">-->
        <!--<input type="text">-->
        <!--<input type="button" value="+">-->
        <!--<span></span>-->
    <!--</div>-->
<!--</section>-->
<script>

    var json = [
        //  两个店铺
        {
            "shopname": "京东自营",
            "shopID": 101,
            // 商品
            "goods": [
                {
                    "checked": false,
                    "goodName": "USB转换器",
                    "goodID": 1001,
                    "price": 158,
                    "num": 1
                }, {
                    "checked": false,
                    "goodName": "USB转换器",
                    "goodID": 1002,
                    "price": 158,
                    "num": 1
                }
            ]
        },
        {
            "shopname": "京东非自营",
            "shopID": 102,
            // 商品
            "goods": [
                {
                    "checked": false,
                    "goodName": "ipone7s",
                    "goodID": 1003,
                    "price": 9999,
                    "num": 4
                }, {
                    "checked": false,
                    "goodName": "sumsung note 7",
                    "goodID": 1004,
                    "price": 5288,
                    "num": 10
                }
            ]
        },
        {
            "shopname": "某某旗舰店",
            "shopID": 103,
            // 商品
            "goods": [
                {
                    "goodID": 1007,
                    "checked": false,
                    "goodName": "USB转换器",
                    "price": 158,
                    "num": 1
                }, {
                    "checked": false,
                    "goodName": "USB转换器",
                    "goodID": 1005,
                    "price": 158,
                    "num": 1
                },
                {
                    "checked": false,
                    "goodName": "ipad",
                    "goodID": 1006,
                    "price": 5.22,
                    "num": 5
                }
            ]
        }

    ];
    //页面结构
    var oShop_All=document.getElementById("shop_all");
    //循环json
    for(var i=0;i<json.length;i++){
        var oSection=document.createElement("section");
        //单独添加p标签
        oSection.innerHTML=`<p></p>`;
        oShop_All.appendChild(oSection);
        var oP=document.getElementsByTagName("p");
        oP[i].innerHTML=json[i].shopname;


//        console.log(json[i].goods.length);
        for(var j=0;j<json[i].goods.length;j++){
            var newdiv=document.createElement("div");
            newdiv.innerHTML=`
        <input type="checkbox" class="del" οnclick="sss(this,${json[i].goods[j].goodID})">
        <span>${json[i].goods[j].goodName}</span>
        <span class="oneprice">${json[i].goods[j].price}</span>
        <input type="button" value="-" class="small">
        <input type="text" value="${json[i].goods[j].num}" class="text">
        <input type="button" value="+" class="add">
        <span class="allprice">${json[i].goods[j].price*json[i].goods[j].num}</span>
    `;
           var Section=document.getElementsByTagName('section');
            Section[i].appendChild(newdiv);

//            console.log(json[i].goods[j]);
        }
    }

//    var aDel=document.getElementsByClassName("del");
//    for(var k=0;k<json.length;k++){
//
//    }
    //初始化
    rua();result();


    //加减按钮
    var oAdd=document.getElementsByClassName('add');
    for(var i=0;i<oAdd.length;i++){
        oAdd[i].onclick=function(){
            this.previousElementSibling.attributes["value"].value= parseInt(this.previousElementSibling.attributes["value"].value)+1;
            rua();result();
        }
    }
    var oSmall=document.getElementsByClassName('small');
    for(var i=0;i<oSmall.length;i++){
        oSmall[i].onclick=function(){
            if(this.nextElementSibling.attributes["value"].value=="0"){
                this.nextElementSibling.attributes["value"].value=0;
                rua();result();
            }else{
                this.nextElementSibling.attributes["value"].value= parseInt(this.nextElementSibling.attributes["value"].value)-1;
                rua();result();
            }
        }
    }

    delche();
    function delche(){
        var aDel=document.getElementsByClassName("del");
        for(var i=0;i<aDel.length;i++){
            if(aDel[i].checked){
                for(j=0;j<json.length;j++){
                    for(k=0;k<json[j].goods.length;k++){
                        json[j].goods[k].checked=aDel[i].checked;
                    }
                }
            }
        }
    }

    function sss(aaaa,dell) {
        for (var i = 0; i < json.length; i++) {
            for (var j = 0; j < json[i].goods.length; j++) {
                if (dell == json[i].goods[j].goodID) {
                    json[i].goods[j].checked = aaaa.checked;
                }
            }
        }
    }




    //删除按钮
    del();
    function del(){
        var oDel=document.getElementById("del");
        var aDel=document.getElementsByClassName("del");
        oDel.onclick=function(){
            for(var i=0;i<aDel.length;i++){
                if(aDel[i].checked){
                    aDel[i].parentNode.parentNode.removeChild(aDel[i].parentNode);
                    i--;
                }
            }
            for(j=0;j<json.length;j++){
                for(k=0;k<json[j].goods.length;k++){

                    if(json[j].goods[k].checked){
                        json[j].goods.splice(k,1);

                        //判断是否全部删除   是则删除外面的框
                        if(json[j].goods.length==0){
                            var sSection=document.getElementsByTagName("section");
                            for(var z=0;z<sSection.length;z++){
                                var sDiv=sSection[z].getElementsByTagName("div");
                                if(sDiv.length==0){
                                    sSection[z].parentNode.removeChild(sSection[z]);
                                }
                            }
                        }
                        k--;
                    }
                }
            }
            delche(); rua();result();
        }
    }



    //结果函数
    function result(){
        var oAllprice=document.getElementsByClassName("allprice");
        var oAll=document.getElementById("all");
        var all=0;
        for(var i=0;i<oAllprice.length;i++){
            all+=parseInt(oAllprice[i].innerHTML);
        }
        oAll.innerHTML=all;
    }


    //尾部价格函数
    function rua(){
        var oOnePrice=document.getElementsByClassName("oneprice");
        var oAllprice=document.getElementsByClassName("allprice");
        var oText=document.getElementsByClassName("text");
        for(var i=0;i<oOnePrice.length;i++){
            oAllprice[i].innerHTML=parseInt(oOnePrice[i].innerHTML)*parseInt(oText[i].value);
        }
    }


</script>
</body>
</html>
fanrax
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
功能不全的购物车(json)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #shop_all&gt;section{
复制链接

扫一扫
专栏目录