jquery 实现加入购物车功能

jquery 实现加入购物车功能,第1张

参考以下代码:

注意需要导入jquery.js.

<!DOCTYPE html>  

<html>  

  <head>  

    <title>购物车----jQuery</title>  

    <meta charset="utf-8" />  

    <style type="text/css">  

      h1 {  

        text-align:center  

      }  

      table {  

        margin:0 auto  

        width:60%  

        border:2px solid #aaa  

        border-collapse:collapse  

      }  

      table th, table td {  

        border:2px solid #aaa  

        padding:5px  

      }  

      th {  

        background-color:#eee  

      }  

    </style>  

    <script type="text/javascript" src="./js/jquery.js"></script>  

    <script type="text/javascript">  

      function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象  

        //先获取商品名字和单价还有库存以备后面使用  

        var $tds = $(btn).parent().siblings()  

        //$tds.eq(0)是jQuery对象  $tds[0]是DOM对象  

        var name = $tds.eq(0).html()//string  

        var price = $tds.eq(1).html()//string  

        var stock = $tds.eq(3).html()//string  

          

        //查看库存是否还有<=0  

        if(stock <= 0){  

          return     

        }  

          

        //无论购物车中是否有该商品,库存都要-1  

        $tds.eq(3).html(--stock)  

          

        //在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  

        var $trs = $("#goods>tr")  

        for(var i=0i<$trs.lengthi++){  

          var $gtds = $trs.eq(i).children()  

          var gName = $gtds.eq(0).html()  

          if(name == gName){//若存在  

            var num = parseInt($gtds.eq(2).children().eq(1).val())  

            $gtds.eq(2).children().eq(1).val(++num)//数量+1  

            //金额从新计算  

            $gtds.eq(3).html(price*num)  

            return//后面代码不再执行  

          }  

        }  

        //若不存在,创建后追加  

        var li =  

          "<tr>"+  

            "<td>"+name+"</td>"+  

            "<td>"+price+"</td>"+  

            "<td align='center'>"+  

              "<input type='button' value='-' onclick='decrease(this)'/> "+  

              "<input type='text' size='3' readonly value='1'/> "+  

              "<input type='button' value='+' onclick='increase(this)'/>"+  

            "</td>"+  

            "<td>"+price+"</td>"+  

            "<td align='center'>"+  

              "<input type='button' value='x' onclick='del(this)'/>"+  

            "</td>"+  

          "</tr>"  

        //追加到#goods后面  

        $("#goods").append($(li))  

          

        //总计功能  

        total()  

      }  

        

      //辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回  

      function findStock(btn){  

        var name = $(btn).parent().siblings().eq(0).html()//获取商品名字  

        //注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr  

        var $trs = $("#table1>tbody>tr:gt(0)")  

        for(var i=0i<$trs.lengthi++){  

          var fName = $trs.eq(i).children().eq(0).html()  

          if(name == fName){//找到匹配的商品  

            return $trs.eq(i).children().eq(3)  

          }  

        }  

      }  

        

      //增加"+"功能  

      function increase(btn){  

        //获取该商品库存看是否<=0  

        var $stock = findStock(btn)  

        var stock = $stock.html()  

        if(stock <= 0){  

          return  

        }  

        //库存-1    

        $stock.html(--stock)  

        //购物车数据改变  

        var $td = $(btn).prev()  

        var num = parseInt($td.val())//number  

        //num此时为number类型(在计算时会自动转换为number类型)  

        $td.val(++num)  

        //获取单价,再加计算前要先转换为number类型  

        var price = parseInt($(btn).parent().prev().html())  

        $(btn).parent().next().html(num*price)  

          

        //总计功能  

        total()  

      }  

        

      //减少"-"功能  

      function decrease(btn){  

        //该商品数量=1时候不能再减少  

        var num = parseInt($(btn).next().val())  

        if(num <= 1){  

          return     

        }  

        var $stock = findStock(btn)  

        //库存+1  

        var stock = $stock.html()  

        $stock.html(++stock)  

        //商品数量-1  

        $(btn).next().val(--num)  

        //从新计算金额  

        var price = parseInt($(btn).parent().prev().html())  

        $(btn).parent().next().html(price*num)  

          

        //总计功能  

        total()  

      }  

        

      //"x"删除按钮功能  

      function del(btn){  

        //将商品数量归还库存  

        var $stock = findStock(btn)  

        var stock = parseInt($stock.html())  

        var num = parseInt($(btn).parent().prev().prev().children().eq(1).val())  

        $stock.html(num + stock)  

        //清空改行商品列表  

        $(btn).parent().parent().remove()  

          

        //总计功能  

        total()  

      }  

    //总计功能  

    function total(){  

      //获取所有购物车中的trs  

      var $trs = $("#goods tr")  

      var amount = 0  

      for(var i=0i<$trs.lengthi++){  

        var money = parseInt($trs.eq(i).children().eq(3).html())  

        amount += money  

      }  

      //写入总计栏  

      $("#total").html(amount)  

    }  

    </script>  

  </head>  

  <body>  

    <h1>真划算</h1>  

    <table id="table1">  

      <tr>  

        <th>商品</th>  

        <th>单价(元)</th>  

        <th>颜色</th>  

        <th>库存</th>  

        <th>好评率</th>  

        <th> *** 作</th>  

      </tr>     

      <tr>  

        <td>罗技M185鼠标</td>  

        <td>80</td>  

        <td>黑色</td>  

        <td>5</td>  

        <td>98%</td>  

        <td align="center">  

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>  

        </td>  

      </tr>  

      <tr>  

        <td>微软X470键盘</td>  

        <td>150</td>  

        <td>黑色</td>  

        <td>9028</td>  

        <td>96%</td>  

        <td align="center">  

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>  

        </td>  

      </tr>  

      <tr>  

        <td>洛克iphone6手机壳</td>  

        <td>60</td>  

        <td>透明</td>  

        <td>672</td>  

        <td>99%</td>  

        <td align="center">  

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>  

        </td>  

      </tr>  

      <tr>  

        <td>蓝牙耳机</td>  

        <td>100</td>  

        <td>蓝色</td>  

        <td>8937</td>  

        <td>95%</td>  

        <td align="center">  

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>  

        </td>  

      </tr>  

      <tr>  

        <td>金士顿U盘</td>  

        <td>70</td>  

        <td>红色</td>  

        <td>482</td>  

        <td>100%</td>  

        <td align="center">  

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>  

        </td>  

      </tr>  

    </table>  

    

    <h1>购物车</h1>  

    <table>  

      <thead>  

        <tr>  

          <th>商品</th>  

          <th>单价(元)</th>  

          <th>数量</th>  

          <th>金额(元)</th>  

          <th>删除</th>  

        </tr>  

      </thead>  

      <tbody id="goods">  

      </tbody>  

      <tfoot>  

        <tr>  

          <td colspan="3" align="right">总计</td>  

          <td id="total"></td>  

          <td></td>  

        </tr>  

      </tfoot>  

    </table>      

  </body>  

</html>

最终效果图:

<script>

jQuery(function($) {

    $("#add").on("click", function() {

        var boxs = $(":checkbox[name='haitai']:checked")

        if (!boxs.length) {

            alert("请选择商品!")

        } else {

            var bao = ""

            boxs.each(function(i, dom) {

                bao += $(dom).attr("value") + "\n"

            })

            localStorage.car = localStorage.car ? bao + localStorage.car : bao

            alert("成功加入购物车!")

        }

    })

})

</script>

给你个示例吧,应该能帮助到你

这是html

<input id="Button1" type="button" value="button" />

    <table style="width: 100%">

        <tr>

            <td>

                <div style="width:100px height: 100px border: 1px solid #f08080" id="shop">购物车</div>

            </td>

            <td>&nbsp</td>

            <td>&nbsp</td>

        </tr>

        <tr>

            <td style="height: 500px">&nbsp</td>

            <td>&nbsp</td>

            <td>&nbsp</td>

        </tr>

        <tr>

            <td>&nbsp</td>

            <td>&nbsp</td>

            <td>

                <div style="width: 50px height: 50px background-color: #f08080" id="product">

                    商品

                </div>

            </td>

        </tr>

    </table>

这个是jQuery代码:

$(function() {

        $("#Button1").click(function() {

            var shopOffset = $("#shop").offset()

            var cloneDiv = $("#product").clone()

            var proOffset = $("#product").offset()

            cloneDiv.css({ "position": "absolute", "top": proOffset.top, "left": proOffset.left })

            $("#product").parent().append(cloneDiv)

            cloneDiv.animate({

                left: shopOffset.left,

                top: shopOffset.top

            },"slow")

        })

    })


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11922829.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存