前端day08--＞动画--＞（购物车商品增删案例）

bzy1998

已于 2023-04-24 16:14:17 修改

阅读量118

点赞数

文章标签：前端动画 javascript

于 2023-04-23 22:49:46 首次发布

本文链接：https://blog.csdn.net/czlj1998/article/details/130325934

版权

01- 自定义动画

$('div').animate({},时间,function(){})

        $(function(){
            $("button").click(function(){
                $("div").animate(
                    {width:600,height:600},
                    5000,
                    function(){
                        console.log("动画结束");
                    }
                )
            })
        })

02- 手风琴案例

一、鼠标移入某li块后在下一个动画开始之前加stop停止当前动作后摇$(this).stop()

二、添加动画animate({width:224})

三、接着去查找当前元素中属性 class 为 "big" 的子元素（即当前元素的直接子元素，且其 class 为"big"），然后停止之前的动画（如果有的话）find(".big").stop()

四、若找到 "big" 子元素，将其显示出来find(".big").stop().show()

五、接着，查找当前元素中属性 class 为 "small" 的兄弟元素（即当前元素的同级元素，且其 class 为 "small"）。.siblings(".small")

六、停止之前的动画（如果有的话），然后将其隐藏起来。siblings(".small").stop().hide()

    $(function(){
        $(".king li").mouseenter(function(){
            // 鼠标移入
            // 在下一个动画开始之前加stop停止当前动作后摇
            $(this).stop().animate({width:224}).find(".big").stop().show().siblings(".small").stop().hide()
        })
        $(".king li").mouseleave(function(){
            // 鼠标移出
            $(this).stop().animate({width:69}).find(".big").stop().hide().siblings(".small").stop().show()
        })
    })

03- 遍历

$.each(obj,function(key,value){}）

$.each(对象，function(){})--遍历

        $(function(){
            var arr  = ["a","b","c"]
            var obj = {a:1,b:2,c:3}
            // $.each(对象，function(){})--遍历
            $.each(obj,function(key,value){
                console.log(key,value);
            })
            $.each(arr,function(index,item){
                console.log(index,item);
            })
        })

案例7：购物车综合案例

一、首先是全选功能，2个全选按钮是同步的，全选时所有按钮都被选中

$(".checkall").change(function(){
            $(".checkall,.j-checkbox").prop("checked",$(this).prop("checked"))
            if($(this).prop("checked")){
                console.log(1);
                $(".cart-item").addClass("check-cart-item");
            }
            else{
                $(".cart-item").removeClass("check-cart-item");
            }
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
        })

注：在这段代码中，prop()是jQuery提供的方法，用于获取或设置匹配元素的属性值。在上述代码中，prop()被用于设置匹配元素的checked属性值，也就是勾选状态。具体来说，代码中的$(this)指代当前选中的元素，$(this).prop("checked")用于获取当前元素的勾选状态，然后将此勾选状态设置给class为"checkall"和"j-checkbox"的元素的checked属性，以实现全选功能。

这里要说明的是：调用了sumFn()方法，要提前进行定义

定义一个p来存储每个商品的price，i为被勾选的商品类别数量

var p = $(domEle).text().substr(1)-0;

if($(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")){
                    sum += p;
                    i++;
                }

这段代码中，$(domEle)表示选中的某一个元素，.siblings(".p-checkbox")表示选中该元素兄弟节点中class为".p-checkbox"的元素，.children(".j-checkbox")表示选中兄弟节点中class为.p-checkbox元素的子元素中class为.j-checkbox的元素。也就是说，该if语句是用来检查和计算是否有同组商品被选中的功能。具体来说：

$(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")检查domEle下的同组商品中是否有被选中的项，并返回布尔值，如果有被选中的项，返回true，否则返回false。
如果同组商品中有被选中的项，那么代码块中的语句sum += p;和i++;将被执行。其中，sum += p;用于将该商品的价格累加到总价sum中，i++;用于计算同组商品中被选中的数量。因此，该代码块的作用是累加同组商品中所有被勾选中的商品的总价，并计算被勾选的商品数量。

 $(".amount-sum em").text(i);
            return sum;

实时显示被选中的商品数量

// 计算总价的方法
        function sumFn(){
            // 计算总体价格--3合一(遍历3个sum)
            var sum = 0;
            var i = 0 ;
            // 勾选才算钱，不勾选不算钱
            $(".p-sum").each(function(index,domEle){
                var p = $(domEle).text().substr(1)-0;
                if($(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")){
                    sum += p;
                    i++;
                }
            })
            $(".amount-sum em").text(i);
            return sum;
            
        }

其次，要为选中的模块添加背景颜色，即添加类，该类包含background

$(".cart-item").addClass("check-cart-item");

最后计算总价及商品数量在右下角显示

$(".price-sum").children("em").text(sumFn());

在这段代码中，text()是jQuery提供的方法，用于设置或获取匹配元素的文本内容。在上述代码中，text()被用于设置class为"price-sum"的元素下的子元素em的文本内容。具体来说，代码中的sumFn()用于计算某些数据的总和，然后将总和的值作为文本内容设置给class为"price-sum"的元素下的子元素em。这就是将某个元素的文本内容设置为指定的值的功能。

二、有一个不选全选取消，全选所有的j-checkbox小框就全选按钮也被勾选

// 有一个不选全选取消，全选就全选
        $(".j-checkbox").change(function(){
            // console.log($(".j-checkbox").length,$(".j-checkbox:checked").length);
            if($(".j-checkbox").length === $(".j-checkbox:checked").length){
                $(".checkall").prop("checked",true);
                $(".cart-item").addClass("check-cart-item");
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }
            else{
                $(".checkall").prop("checked",false);
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }
            if($(this).prop("checked")){
                console.log(1);
                $(this).parents(".cart-item").addClass("check-cart-item");
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }
            else{
                $(this).parents(".cart-item").removeClass("check-cart-item");
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }    
        })

全选时则重复上述的全选功能

else则为没有全选，将.checkall的checked置为false$(".checkall").prop("checked",false);

同时计算剩余被勾选的商品总价$(".price-sum").children("em").text(sumFn());

最后是被选中的商品的background更改-->为其添加类即可

$(this).parents(".cart-item").addClass("check-cart-item");

 if($(this).prop("checked")){
                console.log(1);
                $(this).parents(".cart-item").addClass("check-cart-item");
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }
            else{
                $(this).parents(".cart-item").removeClass("check-cart-item");
                // 计算剩余商品的总价与候选的商品数量
                $(".price-sum").children("em").text(sumFn());
            }

若单独的j-checkbox被点击，并没有全选，则要重新计算总价以及更新backgroundColor类，还有勾选商品的类数

$(this).parents(".cart-item").addClass("check-cart-item");背景置黄，被选中

计算剩余商品的总价与候选的商品数量：

$(".price-sum").children("em").text(sumFn());

注意的是：候选商品数量被写进了sumFn()方法中：$(".amount-sum em").text(i);

也就是说，每一次计算总价，商品数量的栏都会被实时更新

三、为每类商品的数量button的增减设置功能

类别itext为该input的class类：

减少功能：

        // 减少数量
        $(".decrement").click(function(){
            // 点击减少，需要取出input里的val值
            var loss = $(this).siblings(".itxt").val();
            // console.log(loss);
            // 每一次点击都要--，并再次赋值给input
            loss--;
            if(loss<=0){
                loss =1;
                return;
            }
            $(this).siblings(".itxt").val(loss);
            fn(this,loss);
        })

点击减号时，先取出input里的值var loss = $(this).siblings(".itxt").val();

然后loss--，input里的text值被修改

边界：若loss<=0时，置loss=1，为最小值

最后将更新的loss值放回到input的text中：$(this).siblings(".itxt").val(loss);

注：结果的fn()方法为计算input数量后，每种商品小计的分总价格方法

// 封装一个方法来算小计的钱
        function fn(dom,n){
            // 先取值
            var p = $(dom).parents(".p-num").siblings(".p-price").text().substr(1);
            $(dom).parents(".p-num").siblings(".p-sum").text("￥"+p*n)
            $(".price-sum").children("em").text(sumFn())
        }

（1）首先要取出单价：var p = $(dom).parents(".p-num").siblings(".p-price").text().substr(1);

（2）计算小计：$(dom).parents(".p-num").siblings(".p-sum").text("￥"+p*n)

（3）重新计算总价：$(".price-sum").children("em").text(sumFn())

增加功能

        // 增加数量
        $(".increment").click(function(){
            // 点击增加，需要取出input里的val值
            var add = $(this).siblings(".itxt").val();
            // 每一次点击都要++，并再次赋值给input
            add++;
            $(this).siblings(".itxt").val(add);
            fn(this,add);
        })

四、为删除任意商品添加功能

// 操作中的删除功能
        $(".p-action a").click(function(){
            $(this).parents(".p-action").parents(".cart-item").remove();
        // 计算剩余商品的总价与候选的商品数量
        $(".price-sum").children("em").text(sumFn());
        })

删除后仍需要计算总价

五、为删除勾选商品添加功能

// 删除选中的商品
        $(".remove-batch").click(function(){
            // 遍历所有选中的商品并删除
            $(".cart-item").each(function(index,domEle){
                if($(domEle).hasClass("check-cart-item")){
                    $(domEle).remove();
                }
            })
            // 计算剩余商品的总价与候选的商品数量
            $(".price-sum").children("em").text(sumFn());
        })

遍历每一个cart-item类中包含背景颜色的类即为被勾选的商品-->并删除

if($(domEle).hasClass("check-cart-item")){

$(domEle).remove();

}

删除后仍需要计算总价

六、为清空购物车按钮添加功能

// 清空购物车
        $(".clear-all").click(function(){
            $(".cart-item").each(function(index,domEle){
                $(domEle).remove();
            })
            // 计算剩余商品的总价与候选的商品数量
            $(".price-sum").children("em").text(sumFn());

        })

删除后仍需要计算总价