jquery实现购物车

最新推荐文章于 2023-08-30 21:53:10 发布

白柚Y

最新推荐文章于 2023-08-30 21:53:10 发布

阅读量350

点赞数

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/m0_67084957/article/details/123242744

版权

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            user-select: none;
        }

        .container {
            width: 1200px;
            margin: 50px auto;
        }

        .good-list {
            overflow: hidden;
        }

        .good {
            position: relative;
            float: left;
            width: 150px;
            height: 70px;
            margin-right: 15px;
            background-color: #ff9000;
            border-radius: 5px;
        }

        .good::after {
            content: "+";
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 50px;
            color: #fff;
            text-align: center;
            line-height: 70px;
            background-color: rgba(0, 0, 0, .3);
            transition: top .4s ease;
            cursor: pointer;
        }

        .good:hover::after {
            top: 0;
        }

        .good img {
            float: left;
            width: 50px;
            margin: 10px;
        }

        .good p {
            margin-top: 10px;
            font-size: 20px;
        }

        .good p:last-child {
            margin-top: 2px;
            font-size: 14px;
        }

        h2 {
            margin-top: 20px;
            font-size: 40px;
        }

        h2 img {
            width: 50px;
            vertical-align: bottom;
        }

        table {
            margin-top: 20px;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px 25px;
            text-align: center;
            border: 2px solid #ff9000;
        }

        td span {
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }

        td span:first-child,
        td span:last-child {
            border: 1px solid #ff9000;
            cursor: pointer;
        }

        button {
            padding: 5px 10px;
            background-color: #ff9000;
            border: none;
            outline: none;
        }
    </style>

<body>
    <div class="container">
        <div class="good-list">
            <!-- <div class="good">
                <p>苹果</p>
                <p>￥ 7/斤</p>
            </div> -->
        </div>

        <h2>
            <!-- <img src="../lib/image/jQuery/cart/购物车.png" alt=""> -->
            购物车
        </h2>

        <table>
            <tr>
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>库存</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <!-- <tr>
                <td>123456</td>
                <td>苹果</td>
                <td>7</td>
                <td>20</td>
                <td>
                    <span>+</span>
                    <span>1</span>
                    <span>-</span>
                </td>
                <td>7</td>
                <td>
                    <button>删除</button>
                </td>
            </tr> -->
        </table>

        <h3>总计:<span>0</span></h3>
    </div>

<script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/cart.js"></script>
    <script>
        //渲染商品内容
        initGoods();
        function initGoods(){
            var res='';
            for(var j=0; j<fruits.length;j++){
                res +=`<div class="good">
                <p>${fruits[j].goodName}</p>
                <p>￥ ${fruits[j].price}/斤</p>
            </div>`
            }
            $('.good-list').html(res)
        }


        //给每个商品绑定点击事件
        $('.good').click(function(){
            var idx = $(this).index();
            console.log(idx);
            //遍历购物车数组,查找看购物车里面是否已经存在该商品
            var findIdx=-1;
            for(var m=0;m<cartArr.length;m++){
                if(fruits[idx].id==cartArr[m].id){
                    //说明已存在,获取到存在在购物车商品的索引
                    findIdx=m;
                }
            }
            //因为索引一定是大于或等于0的,所以...
            if(findIdx>=0){
                //已存在
                cartArr[findIdx].buyCount++
            }else{
                //不存在
                cartArr.push(fruits[idx]);
                cartArr[m].buyCount=1;
            }
            
            //重新渲染页面
            render();
        })

        // 增加 
        function add(idx){
            // 增加的时候  不能超过 库存 
            if(cartArr[idx].buyCount>=cartArr[idx].stock){
                alert('没存货了')
            }else{
                cartArr[idx].buyCount++;
                render();
            } 
            
        }
        // 减少
        function sub(idx){
            // 不能小于 0  
            if(cartArr[idx].buyCount==1){
                cartArr.splice(idx,1)
            }else{
                cartArr[idx].buyCount--;
            }
            render();
        }
        // 删除
        function del(idx){
            cartArr.splice(idx,1);
            render();
        }

        

        //先向本地获取数据
        var  cartArr =JSON.parse(localStorage.getItem('cart'))||[];
        console.log(cartArr);
        
        //渲染表格内容
        function render(){
            var str = `<tr>
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>库存</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>`
            for(var i=0;i<cartArr.length;i++){
                str+=`<tr>
                <td>${cartArr[i].id}</td>
                <td>${cartArr[i].goodName}</td>
                <td>${cartArr[i].price}</td>
                <td>${cartArr[i].stock}</td>
                <td>
                    <span onclick="add(${i})";>+</span>
                    <span>${cartArr[i].buyCount}</span>
                    <span onclick="sub(${i})">-</span>
                </td>
                <td>${cartArr[i].price * cartArr[i].buyCount}</td>
                <td>
                    <button onclick="del(${i})>删除</button>
                </td>
            </tr>`
            }
            $('table').html(str);
        }
    </script>

白柚Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现购物车

<style> * { margin: 0; padding: 0; } ul { list-style: none; } body { user-select: none; } .container { width: 1200px; ..
复制链接

扫一扫