【JS】jQuery重构【购物车案例】

沐语
289 阅读2分钟

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>珠峰培训</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="price.css" />
</head>

<body>
    <div class="wrap">
        <div class="box">
            <ul class="list">
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>12.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>10.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>8.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>8元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>14.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
            </ul>
            <div class="info">
                <span>商品共合计：<em>0</em>件</span>
                <span>共花费了：<em>0</em>元</span>
                <br />
                <br />
                <span>其中最贵的商品单价是：<em>0</em>元</span>
            </div>
        </div>
    </div>
</body>
<script src="./jquery-1.9.1.min.js"></script>
<script src="index.js"></script>

</html>

CSS

.wrap {
	width: 764px;
	height: 800px;
	margin: 0 auto;
	/* background: url(bg.png) no-repeat center center; */
	display: flex;
}

.box {
	width: 479px;
	height: 591px;
	margin: auto;
	background: url(bg1.png) no-repeat center center;
	position: relative;
}

.list {
	width: 100%;
	position: absolute;
	left: 0;
	top: 138px;
}

.list li {
	margin-bottom: 18px;
	width: 100%;
	height: 44px;
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 44px;
}

.list li i {
	width: 52px;
	height: 44px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
}

.list li i:nth-of-type(1) {
	background: url(sub.png) no-repeat center center;
}

.list li i:nth-of-type(2) {
	background: url(add.png) no-repeat center center;
}

.list li em {
	width: 44px;
	height: 36px;
	float: left;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin-right: 10px;
}

.list li span {
	width: 230px;
	height: 36px;
	border-radius: 5px;
	float: left;
	margin-left: 10px;
	background: #171818;
	color: #878787;
	line-height: 36px;
	box-sizing: border-box;
	padding-left: 10px;
}

.list li span strong {
	margin-right: 10px;
}

.info {
	width: 100%;
	height: 140px;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #878787;
	box-sizing: border-box;
	padding: 20px 0 0 42px;
}

.info em {
	width: 46px;
	height: 36px;
	display: inline-block;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin: 0 10px 0;
}

.info span:nth-of-type(2) em {
	width: 66px;
}

.info span:nth-of-type(3) em {
	width: 66px;
}

.info span:nth-of-type(1) {
	margin-right: 20px;
}

JS

新版本(简单版)

        let $btn = $('.list i'); // 获取页面中所有的i标签
        let $ems = $('.list em'); // 获取ul中所有的em元素(所有的数量)
        let $infoEms = $('.info em'); // 获取下边的那三个em元素
        let $strongs = $('.list strong'); // 获取所有的strong(用来求所有小计的和，或者用来获取当前商品的单价)

        $btn.click(function () {
            let index = $(this).index(); // 是在当前兄弟姐妹的索引
            let $count = $(this).siblings('em'); // 获取当前显示数量的em元素
            let num = parseFloat($count.html()); // 获取当前数量
            let $strongs = $(this).siblings('span').find('strong'); // 获取当前的两个strong

            let price = parseFloat($strongs.eq(0).html()) ; // 获取当前商品的单价
            if (index === 0) {
                console.log('-');
                num--;
                num < 0 ? num = 0 : null;
            }
            else {
                console.log('+');
                num++;
            }
            $strongs.eq(1).html(num*price + '元'); // 给当前的商品设置小计
            $count.html(num); // 把最新的数量设置回去
            computed();
        })

        function computed(){
            let allCount = 0, // 初始化累加数量的变量
             allPrice = 0, // 初始化累加小计的数量
             ary = [0]; // 初始化一个存储购买商品的单价的数组

             
             $ems.each(function(index,item){
                 console.log(item);
                allCount+= parseFloat($(item).html())
                // allCount+= parseFloat(item.innerHTML)
             });
             $strongs.each(function(index,item){
                // console.log(index,item);
                if(index%2 === 1){
                    // 如果此条件成立，说明当前的索引是奇数，那对应的strong就是小计
                    console.log(item);
                    allPrice += parseFloat($(item).html());
                }
                else{
                    // 这里的item是当前商品的单价
                    if(parseFloat($(item).next('strong').html()) !== 0){
                        ary.push( parseFloat($(item).html()));
                    }
                    

                }

             })
             

             $infoEms.eq(0).html(allCount);
             $infoEms.eq(1).html(allPrice);
             $infoEms.eq(2).html(Math.max(...ary));

没有用$(this)和each，写的麻烦了

let $li = $("li");
let $ems1 = $li.find("em");
// let $is = $li.find("i");
console.log($li);
console.log($ems1);
// console.log($is);

//给li的i标签循环绑定点击事件
for (let i = 0; i < $li.length; i++) {
    // let $spans = $li.find("span");
    $li.eq(i).find("i").eq(0).click(function () {
        if (Number($ems1.eq(i).html()) <= 0) {
            $ems1.eq(i).html('0');
            $li.eq(i).find("strong").eq(1).html("0元");
            bottomTotal();
        } else {
            let num = Number($ems1.eq(i).html()) - 1; //数量
            $ems1.eq(i).html(`${num}`);
            let price = parseFloat($li.eq(i).find("strong").eq(0).html()); //单价
            let total = price * num; //单价 乘 数量
            $li.eq(i).find("strong").eq(1).html(`${total}元`);
            bottomTotal();
        }
    })
    $li.eq(i).find("i").eq(1).click(function () {
        let num = Number($ems1.eq(i).html()) + 1; //数量
        $ems1.eq(i).html(`${num}`);
        let price = parseFloat($li.eq(i).find("strong").eq(0).html()); //单价
        let total = price * num; //单价 乘 数量
        $li.eq(i).find("strong").eq(1).html(`${total}元`);
        bottomTotal();
    })
}

//计算总共买的数量、总共花费的钱、找出最贵商品单价
function bottomTotal() {
    let $div = $(".info");
    let $ems2 = $div.find("em");
    let totalNum = 0;
    let totalPrice = 0;
    let maxPrice = 0;
    let ary = [0];
    for (let i = 0; i < $li.length; i++) {
        totalNum += Number($ems1.eq(i).html()); //获取所有的数量相加
        totalPrice += parseFloat($li.eq(i).find("strong").eq(1).html()); //获取所有价格相加
        if (Number($ems1.eq(i).html()) > 0) {
            ary.push(parseFloat($li.eq(i).find("strong").eq(0).html()));
        }
    }
    maxPrice = Math.max(...ary);
    $ems2.eq(0).html(`${totalNum}`);
    $ems2.eq(1).html(`${totalPrice}`);
    $ems2.eq(2).html(`${maxPrice}`);
}
avatar
文章
阅读
粉丝