jquery 实现加入购物车功能
请问怎么实现点击加入购物车上方我的购物车数字增加 有动画效果 并且选择哪个产品就出现那个产品的信息 。求详细代码 所有分都给大神
小弟新手 对这么很陌生 请各位不吝赐教！！！谢谢
åè以ä¸ä»£ç ï¼
注æéè¦å¯¼å ¥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=0;i<$trs.length;i++){
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=0;i<$trs.length;i++){
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=0;i<$trs.length;i++){
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>
æç»ææå¾:
jquery 实现加入购物车功能
购物车 商品 单价(元) 数量 金额(元) 删除 总计 最终效果图: 已赞过
jquery 弹出框,如下图 ,加入购物车效果???
margin: 0 auto; border-radius: 12px 12px; position: fixed; display:none; } .add2carttip > div { vertical-align: middle; color: #D0D0D0; text-align: center; font-size: 1.2em; font-weight: bold; margin: 0; ...
web前端购物车功能实现
其实思路都是很简单的，如果你要纯前端的实现，那用Javascript或者jquery就可以做了，如果想前后端联动，那么具体数据操作你就提交到后台，然后后台重新返回页面就可以了
请高手帮我看看,这个jQuery实现的购物车表单金额统计出不来结果_百度知...
单价:1.95 这里出现两个tdprice，，很可能导致循环错乱，建议修改方案，给tr一个id吧，按照你的产品id序号给，比如：<tr id="trprice_<% =id %>" class="trprice">... (".add").click(function(){ ...var trpriceObj = $(this).parents("trprice").attr("id");setTotal(trprice...
ecshop jquery冲突,按照网上说的解决冲突的方法修改后,购物车、评论什...
解决思路大概就是屏蔽ECshop扩展的toJSONString方法，用别的函数代替。为了照顾下小菜们，就写详细点吧。一，修改默认js文件 1、首先复制一份 transport.js 改名为 transport.org.js 提供给后台使用 2、屏蔽掉transport.js里的toJSON功能 行数大概有497-737行之间 由if ( ! Object.prototype.toJSON...
java程序员个人简历精选【4篇】
项目功能:用户登录查看书籍信息加入购物车信用卡支付 主要负责:数据库层 项目收获:通过此项目对数据库的操作更加熟悉,使得页面与数据库得到了更好的交互。 (2)电子邮件应用 使用技术:Jsp javaBean servlet MySql JavaMail API ajax 项目功能:邮件发送 接收 查看 主要负责:业务服务器层 项目收获:采用了潮流的Ajax实现...
前端面试时被问到前端布局,这个怎么回答
音乐播放、登入状态、加入购物车 web前端面试被问到为什么离职 实话实说,但是注意言辞,回答过程中千万不要抱怨、或是“吐槽”前东家的种种不好,请客观地叙述与自己现在状态有哪些不相契合的点。 参考:原东家的发展空间达不到我的期望,我想要寻找新的机会挑战自己,同时创造更大的价值。 注意:避免假大空的官话,会...
Vue面试题集锦
③ 功能场景? 单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车等。 ④ vuex的状态: a. State特性:vuex就是一个仓库,仓库里面放了很多对象,其中state就是数据源存放地,对应于一般Vue对象里面的data。state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的...
TypeScript是怎么提高JavaScript编程效果的
TypeScript还将大量ECMAScript6功能加入到了JavaScript当中，具体包括类与模块，并尝试将这两种本是同根生的语言加以进一步融合，从而满足ECMAScript6的标准化方法要求。通过这种方式，大家可以利用TypeScript开发出能够为ECMAScript6所接纳的代码，同时充分发挥TypeScript的静态类型优势以提升代码安全性水平。Type...
软件开发工程师个人简历(精选8篇)
3、产品全文搜索:采用compass实现商品的全文搜索功能。用户输入查询关健词就可以搜索到相关商品,匹配度高的商品显示在前面; 4、购物车:用户可以把产品添加入购物车,同一产品如果样式或尺码不同视为两个购物项,对同一商品多次点击“购买”,每点击一次累加购物车中该商品的购买数量。购物车具有添加商品、删除商品、修改商...
