jquery购物车添加功能
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
<style>
input{
width: 25px;
}
li{
list-style: none;
}
</style>
</head>
<body> <ul>
<li>
<div>java</div>
<div style="display: inline-block;">
单价:<span id="price_store1" style="margin: 20px;">50.00</span>
库存:<span id="java_store1" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store1">-</button>
<input type="text" id="input_store1" value="0" />
<button id="_store1">+</button>
</div>
</li>
<li>
<div>Javascript</div>
<div style="display: inline-block;">
单价:<span id="price_store2" style="margin: 20px;">30.00</span>
库存:<span id="java_store2" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store2">-</button>
<input type="text" id="input_store2" value="0" />
<button id="_store2">+</button>
</div>
</li>
<li>
<div>MyQSL</div>
<div style="display: inline-block;">
单价:<span id="price_store3" style="margin: 20px;">60.00</span>
库存:<span id="java_store3" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store3">-</button>
<input type="text" id="input_store3" value="0" />
<button id="_store3">+</button>
</div>
</li>
<li>
<div>Oracle</div>
<div style="display: inline-block;">
单价:<span id="price_store4" style="margin: 20px;">55.00</span>
库存:<span id="java_store4" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store4">-</button>
<input type="text" id="input_store4" value="0" />
<button id="_store4">+</button>
</div>
</li>
<li>
<div>jQuery</div>
<div style="display: inline-block;">
单价:<span id="price_store5" style="margin: 20px;">40.00</span>
库存:<span id="java_store5" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store5">-</button>
<input type="text" id="input_store5" value="0" />
<button id="_store5">+</button>
</div>
</li>
<li>
<div>html</div>
<div style="display: inline-block;">
单价:<span id="price_store6" style="margin: 20px;">15.00</span>
库存:<span id="java_store6" style="margin: 20px;">100</span>
</div>
<div style="display: inline-block;">
<button id="store6">-</button>
<input type="text" id="input_store6" value="0" />
<button id="_store6">+</button>
</div>
</li>
</ul>
<li>
总计:<span id="qty_store">0</span>件商品
总价:<span id="total_store">0</span>元
</li> </body>
<script>
$.each($("input"), function(i,n) {
n.disabled = "disabled";
});
var bt = $("button");
$("button:even").on('click',function(){
$("#java_" + this.id).text(parseInt($("#java_" + this.id).text()) + 1);
$("#input_" + this.id).val(parseInt($("#input_" + this.id).val()) - 1);
$("#qty_store").text(parseInt($("#qty_store").text()) - 1);
$("#total_store").text(parseInt($("#total_store").text()) - parseInt($("#price_" + this).text())); });
$("button:odd").on('click',function(){
$("#java" + this.id).text(parseInt($("#java" + this.id).text()) - 1);
$("#input" + this.id).val(parseInt($("#input" + this.id).val()) + 1);
$("#qty_store").text(parseInt($("#qty_store").text()) + 1);
$("#total_store").text(parseInt($("#price" + this.id).text()) + parseInt($("#total_store").text()));
});
</script>
</html>
jquery购物车添加功能的更多相关文章
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 框架的 总结（nop）------添加功能
一.添加功能 1.首先需要在前端显示界面View视图中添加 <div class="pull-right"> <a href="@Url.Action( ...
- JAVAEE——BOS物流项目03：学习计划、messager、menubutton、登陆拦截器、信息校验和取派员添加功能
1 学习计划 1.jQuery easyUI messager使用方式 n alert方法 n confirm方法 n show方法 2.jQuery easyUI menubutton使用方式 3. ...
- python3 练习题(用函数完成登录注册以及购物车的功能)
''' 用函数完成登录注册以及购物车的功能 作业需求: 1,启动程序,用户可选择四个选项:登录,注册,购物,退出. 2,用户注册,用户名不能重复,注册成功之后,用户名密码记录到文件中. 3,用户登录, ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面
改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...
- JS实现购物车动态功能
整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...
- jquery06 jQuery.extend 给jQuery函数添加、继承 静态方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery删除添加输入文本框
效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...
随机推荐
- 131.007 Unsupervised Learning - Feature Selection | 非监督学习 - 特征选择
1 Why? Reason1 Knowledge Discovery (about human beings limitaitons) Reason2 Cause of Dimensionality ...
- OllyDbg的基本使用
注:内容整理自<逆向工程核心原理>,结合我的OllyDbg版本修改了一些内容 1. OllyDbg常用命令及其快捷键 指令 快捷键 含义 Restart Ctrl+F2 重新开始调试 St ...
- 七、angularjs 倒计时
使用定时器时离开页面需要清除定时器,清除的方法有两种分别针对页面有缓存和没有缓存 1.页面有缓存 2.页面没有缓存 angularjs倒计时首先需要注入:$interval 60s倒计时 vm.sec ...
- 修改maven默认的jdk版本
修改maven默认的jdk版本,想改彻底需要在maven的全局配文件(settings.xml)增加以下信息: 在profiles 节点下增加: <profile> <id> ...
- Java Web项目部署
打包 使用Eclipse打包JAVA Web项目 如下 在项目上单击右键选择Export-选择JavaEE文件夹-选择WAR file(MyEclipse),单击Next>如图所示,选择存放打包 ...
- 乘风破浪：LeetCode真题_019_Remove Nth Node From End of List
乘风破浪:LeetCode真题_019_Remove Nth Node From End of List 一.前言 这次总算到了链表的操作了,之后肯定会有排序算法,二叉树,排序树,图等等的操作,现在我 ...
- socket端口复用问题一二
实际上,默认的情况下,如果一个网络应用程序的一个套接字 绑定了一个端口( 占用了 8000 ),这时候,别的套接字就无法使用这个端口( 8000 ), 验证例子如下: #include <std ...
- ipconfig命令一览
前文用到了ipconfig /displaydns和ipconfig /flushdns,加上之前经常ipconfig查ip,今天看了一下别的命令,用的不多,仅作备忘~~ 命令行窗口中输入ipconf ...
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- BZOJ 2038 小Z的袜子(hose) 莫队算法模板题
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2038 题目大意: 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中 ...