标签：index target img js item taobao 淘宝 购物车 event

仿淘宝购物车的制作
html：部分

<main>
        <header>
            <img src="./img/taobao_logo.gif" alt="">
            <p>您的位置
                <a href="#"> 首页》</a>
                <a href="#">我的淘宝》</a> 我的购物车
            </p>
            <img src="./img/Snipaste_2021-01-08_17-29-06.png" alt="" class="selfimg">
        </header>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="all">全选
                    </th>
                    <th>店铺宝贝</th>
                    <th>获积分</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>小记（元）</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="button" value="删除所选">
                    </td>
                    <td colspan="6">
                        <p></p>
                        <p></p>
                        <img src="./img/taobao_subtn.jpg" alt="">
                    </td>
                </tr>
            </tfoot>
        </table>
    </main>

js（核心代码部分）

let arr = [{
        shop: '纤巧百媚时尚鞋坊',
        seller: '纤巧百媚',
        img: "./img/taobao_cart_01.jpg",
        intro: '日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色',
        color: '棕色',
        size: '37',
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        point: 5,
        price: 138,
        count: 1,
        state: false
    },
    {
        shop: '香港我的美丽日记',
        seller: 'lokemick2009',
        img: "./img/taobao_cart_02.jpg",
        intro: 'chanel/香奈儿/香奈儿炫亮魅力唇膏3.5g',
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        icon2: "./img/taobao_icon_02.jpg",
        point: 12,
        price: 265,
        count: 1,
        state: false
    },
    {
        shop: '实体经营',
        seller: '林颜店铺',
        img: "./img/taobao_cart_03.jpg",
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        icon2: "./img/taobao_icon_02.jpg",
        intro: '蝶妆海蜇精华粉底液10#（象牙白）',
        point: 3,
        price: 138,
        count: 1,
        state: false
    },
    {
        shop: '红痘痘的小屋',
        seller: 'taobao豆豆',
        img: "./img/taobao_cart_04.jpg",
        intro: '相宜促销专供 daS推荐 最好用LilyBell化妆棉',
        icon1: "",
        icon2: "./img/taobao_icon_01.jpg",
        point: 12,
        price: 12,
        count: 2,
        state: false
    }
];
let tbEle = document.getElementsByTagName("tbody")[0];

function renderArr(inputIndex) {
    tbEle.innerHTML = "";
    let str = "";
    let money = 0;
    let point = 0;
    let i = 1;
    arr.map((item, index) => {
        console.log(i++, item.state);
        str += `<tr>
                 <td>店铺：</td>
                 <td>${item.shop}</td>
                 <td>${item.seller}</td>
                 <td><img src="./img/taobao_relation.jpg" alt="${index}"></td>
            </tr>`;
        str += `<tr>`;
        //如果被选中则添加checked
        if (item.state) {
            str += `<td><input class="check" type="checkbox" data-index="${index}" checked></td>`;
        } else {
            str += `<td><input class="check" type="checkbox" data-index="${index}"></td>`;
        }

        str += `<td>
                <img src="${item.img}" alt="${index}">
                <div>
                    <p>${item.intro}</p>
                    <p>颜色：${item.color}尺码：${item.size}</p>`;

        str += `保障`
        item.icon1.split(",").map(item =>
            str += `<img src="${item}">`
        )
        str += `</div>
            </td>
            <td>${item.point}</td>
            <td>${item.price}</td>
            <td>
                <span data-index=${index}>-</span> 
                <input type="text" style="width:40px" data-index=${index} value="${item.count}" >
                <span data-index=${index}>+</span>
            </td>
            <td>${item.price*item.count}</td>
            <td><span data-index=${index} >删除</span></td>
       </tr>`;
        //合计与积分只累加被选中的商品
        if (item.state) {
            money += item.price * item.count;
            point += item.point * item.count;
        }
    });
    tbEle.innerHTML = str;
    let pEles = document.querySelectorAll("tfoot p");
    pEles[0].innerHTML = `商品总价（不含运费）:${money}元`;
    pEles[1].innerHTML = `可获得积分${point}点`;

    //当数量是手动输入时，重新获取焦点
    if (inputIndex != undefined) {
        let inputEles = document.querySelectorAll("input[type='text']");
        inputEles[inputIndex].value = "";
        inputEles[inputIndex].value = arr[inputIndex].count;
        inputEles[inputIndex].focus();
    }
}

renderArr();
let tableEle = document.querySelector("table");

//table后代节点被点击触发
tableEle.addEventListener("click", e => {
    //获取所有多选框（除全选）
    let inputEles = document.getElementsByClassName("check");
    let allEle = document.querySelector(".all");
    let event = e || window.event;
    //删除单个商品
    if (event.target.innerText == "删除") {
        arr.splice(event.target.dataset.index, 1);
        renderArr();
    }
    //删除单个或多个商品
    if (event.target.value == "删除所选") {
        //遍历所有的被选中的多选框，原数据中state为true;
        [...inputEles].map((item, index) => {
            if (item.checked) {
                arr[index].state = true;
            }
        })
        arr = arr.filter(item => !item.state);
        allEle.checked = false;
        renderArr();
    }
    //选中或取消所有商品
    if (event.target.className == "all") {
        if (event.target.checked) {
            [...inputEles].map((item, index) => {
                item.checked = true;
                arr[index].state = true;
            });
        } else {
            [...inputEles].map((item, index) => {
                item.checked = false;
                arr[index].state = false;
            });
        }
    }
    //判定每个多选框是不是都被选中
    allEle.checked = ([...inputEles].every(item => item.checked) && [...inputEles].length != 0) ? true : false;
    //判定加数量
    if (event.target.innerText == "+") {
        arr[event.target.dataset.index].count = ++event.target.previousElementSibling.value;
        arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
        console.log(event.target.dataset.index);
        renderArr();
        console.log(arr);
    }
    if (event.target.innerText == "-" && event.target.nextElementSibling.value > 1) {
        arr[event.target.dataset.index].count = --event.target.nextElementSibling.value;
        arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
        renderArr();
    }
    //设置被选中商品元数据的state为true
    if (event.target.className == "check") {
        [...inputEles].map((item, index) => {
            arr[index].state = item.checked ? true : false;
        });
        renderArr();
    }
});

//手动输入数量触发
tableEle.addEventListener("input", e => {
    let event = e || window.event;
    if (event.target.type == "text") {
        arr[event.target.dataset.index].count = event.target.value;
        renderArr(event.target.dataset.index);
    }
})

标签：index,target,img,js,item,taobao,淘宝,购物车,event
来源： https://blog.csdn.net/hahahahzfsf/article/details/112755036

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。