jQuery实现一个简单的购物车功能

最新推荐文章于 2023-05-03 00:36:50 发布

weixin_30824479

最新推荐文章于 2023-05-03 00:36:50 发布

阅读量195

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/smile-bai/p/7470753.html

版权

最近由于工作需要的原因，开始系统学习jQuery的知识，然后跟着一个视频教程做了一个购物车的功能，现总结如下。

第一步：准备HTML页面，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"   src="jquery.js"></script>
<title>购物车</title>
<style type="text/css">
h1{
    text-align:center}
table{
    margin:0 auto;
    width:60%;
    border:2px solid #09C;
    border-collapse:collapse}
table th,table td{
    border:2px solid #09C;
    padding:5px;
    
    }
th{
    background-color:#0CC;}
</style>
<script type="text/javascript">

    

</script>
</head>
<body>
<h1>真划算</h1>
<table>
    <tr>
        <th>商品</th>
        <th>单价</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>罗技鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
    </tr>
    <tr>
        <td>微软键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>100</td>
        <td>98%</td>
        <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
    </tr>
    <tr>
        <td>手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>200</td>
        <td>98%</td>
        <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
    </tr>
    <tr>
        <td>耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>302</td>
        <td>98%</td>
        <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
    </tr>
    
</table>

<h1>购物车</h1>
<table>
<thead>
    <tr>
    <td>商品</td>
    <td>单价</td>
    <td>数量</td>
    <td>金额</td>
    <td>删除</td>
    </tr>
</thead>
<tbody id="goods">
<!--
    <tr>
    
        <td>罗技鼠标</td>
        <td>80</td>
        <td>
        <input type="button" value="-"/>
        <input type="text" size="3" readonly="readonly"/>
        <input type="button" value="+"/>
        </td>
        <td>80</td>
        <td align="center">
        <input type="button" value="*"/>
        </td>
    </tr>-->
</tbody>
<tfoot>
    <tr>
       <td colspan="3" align="right">总计</td>
       <td></td>
       <td></td>
    </tr>
</tfoot>
</table>
</body>
</html>

第二步：实现增加物品的功能代码：

<script type="text/javascript">

    function addShopping(btn){
        var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td
        var name=$(tds).eq(0).text();//获取商品名称的td的文本值
        var price=$(tds).eq(1).text();//获取商品价格的td的文本值
        var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
        +"<td>"+name+"</td>"
        +"<td>"+price+"</td>"
        +"<td>"
        +"<input type='button' value='-'/>"
        +"<input type='text' size='3' readonly='readonly'/>"
        +"<input type='button' value='+'/>"
        +"</td>"
        +"<td>"+price+"</td>"
        +"<td align='center'>"
        +"<input type='button' value='*'/>"
        +"</td></tr>");
        $("#goods").append(html);
        }

第三步：实现将购物车中的物品删除的基本功能

function deletShopping(btn){//给上一步你拼接的删除按钮上绑定一个这样的方法
            $(btn).parent().parent().remove();
            }

第四步：增加物品和删除物品的基本功能完成以后，我们就要开始处理细节问题了，同一件物品的增加或者减少

function increas(btn){
                var text=$(btn).prev();
                var acount = parseInt($(text).val());
                $(text).val(++acount);
                //获取单价
                var tds = $(text).parent().siblings();
                var price = parseInt($(tds).eq(1).text()); 
                //获取总价
                var sum = price*acount;
                $(tds).eq(2).text(sum);
}
function decrease(btn){
                    var text=$(btn).next();
                var acount = parseInt($(text).val());
                $(text).val(--acount);
                if(acount<1){
                    return;
                    }
                //获取单价
                var tds = $(text).parent().siblings();
                var price = parseInt($(tds).eq(1).text());
                
                //获取总价
                var sum = price*acount
                $(tds).eq(2).text(sum);
}

最后，算所有商品合计：

function total(){
                    var trs = $("#goods tr");
                    var sum=0;
                    for(var i=0;i<trs.length;i++){
                        var td = trs.eq(i).children().eq(3);
                        var price = parseInt($(td).text());
                        //alert(price);
                        sum = sum + price;
                        
                        }
                        $("#total").text(sum);
                    }

然后将total方法放在前四个方法后面，每次事件触发都要调用合计的方法。

好了，到这里呢，一个简单的购物车功能就做完了，最后附图一张，大功告成！