实现购物车的加减算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="zaocan_2_2">
        <div class="card">
            <p class="p1">流油包子</p>

            <p class="p4 zao_1"><span class="zaocan_price">5.00</span>/份</p>
            <div class="zaocan_2_1">
                <input class="min" name="" type="button" value="-" />
                <input class="text_box" name="" type="text" value="0" />
                <input class="add" name="" type="button" value="+" />
            </div>
        </div>
    </div>
    <div class="zaocan_2_2">
        <div class="card">
            <p class="p1">小米粥</p>

            <p class="p4 zao_1"><span class="zaocan_price">2.00</span>/份</p>
            <div class="zaocan_2_1">
                <input class="min" name="" type="button" value="-" />
                <input class="text_box" name="" type="text" value="0" />
                <input class="add" name="" type="button" value="+" />
            </div>
        </div>
    </div>
    <p class="zaocan_13">¥:
        <label id="total"></label>
    </p>
    <script src="jquery.js"></script>
    <script>
    $(function() {
        $(".add").click(function() {
            var t = $(this).parent().find(‘input[class*=text_box]‘);
            t.val(parseInt(t.val()) + 1)
            setTotal();
        })
        $(".min").click(function() {
            var t = $(this).parent().find(‘input[class*=text_box]‘);
            t.val(parseInt(t.val()) - 1)
            if (parseInt(t.val()) < 0) {
                t.val(0);
            }
            setTotal();
        })

        function setTotal() {
            var s = 0;
            $(".zaocan_2_2").each(function() {
                s += parseInt($(this).find(‘input[class*=text_box]‘).val()) * parseFloat($(this).find(‘span[class*=zaocan_price]‘).text());
            });
            $("#total").html(s.toFixed(2));
        }
        setTotal();

    })
    </script>
</body>

</html>

  

时间: 2024-10-12 07:35:01

实现购物车的加减算法的相关文章

jQuery实现购物车数字加减效果

效果图: jQuery实现购物车数字加减效果,方法本简单. 经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下: HTML: <div class="gw_num"> <em class="jian">-</em> <input type="text" value="1" class="num"/&

js jquery 权限单选 bug修改以及正确代码 购物车数量加减

效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javascript:;" class="minus" onclick="delpubls(this)">-</a> <input type="number" style="min-height: 20px;font

微信小程序——购物车数字加减

上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setData更改这个数字.当数字等于1的时候,要给-的按钮添加一个disabled的属性. wxml代码: <view class='row item-center'> <button class="buy-num-btn btn-minus" disabled="{{m

jquery实现购物车数量加减,价格计算功能

HTML代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta http-equiv="X-UA-Co

Goods:购物车条目加减数量实现

list.jsp 1 //给减号添加click事件 2 3 $(".jian") 4 .click( 5 function() { 6 //获取cartItemId 7 var id = $(this).attr("id").substring(0, 32); 8 var quantity = $("#" + id + "Quantity").val(); 9 //判断当前数量是否为1 如果为1就不是修改数量啦 而是删除 10

静态页面购物车数量加减功能实现

1.进行"加"的效果时:一定要注意:获取单价和数量是禁止使用id或者class选择器,要使用add的选择器去寻找单价和数量的值 HTML: <div class="col-xs-7"> <p>什锦小郡肝套餐</p> <p style="height: 90px"></p> <p style="color: red;font-size: 45px;"> &l

购物车商品加减效果

思路: 根据点击运算符进行相关的运算. 1.获取点击的运算符: 2.通过节点关系找到input的值: 3.进行运算: 4.将计算后的值返回给本身 JavaScript方式: <body> <button onclick="calculate(this)">-</button> <input type="text" size="2" value="1" name="num&qu

js-03课 -03 加减算法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> //fn1(1, 2, 3, 5); function fn1() { alert(arguments) // object alert(arguments

购物车数量加减代码

.amount-wrap .icon{ display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #cdcdcd; background-color: #eee; vertical-align: middle; } .amount-wrap .icon-minus { border-right: 0; } .amount-wrap .icon