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 ...
随机推荐
- jquery 之节点操作
一.添加节点 [添加内部子节点方法]:内部节点就是儿子节点 append() 在被选元素内部的结尾插入内容 appendTo() 将指定内容插入到被选标签内部的结尾 prepend() 在 ...
- python中的特殊数据类型
一.python中的特殊数据类型 对于python,一切事物都是对象,对象基于类创建.像是“wangming”,38,[11,12,22]均可以视为对象,并且是根据不同的类生成的对象. 参照:http ...
- Azure 经典模式中虚拟机证书指纹的生成和作用
用户在使用经典虚拟机时,经常会有如下疑问:门户主板页面中的 SSH/RDP 证书指纹这项信息是怎么来的?用途是什么?为什么有的时候为空?有没有对虚拟机使用有什么影响?以下我们进行一些基本的介绍: 证书 ...
- 【Oracle】查看被锁的表和解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- 按钮在执行frame动画的时候怎么响应触发事件？
按钮在执行frame动画的时候怎么响应触发事件? 代码中效果(请注意,我并没有点击到按钮,而是点击到按钮的终点frame值处): 对应的代码: // // ViewController.m // Ta ...
- C++显式隐式构造函数
https://blog.csdn.net/starlee/article/details/1331268#comments
- 4 Dockerfile指令详解 && COPY 指令
COPY 指令将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 <目标路径> 位置.比如: COPY package.json /usr/src/app/ ...
- rsync- sersync -inotify
Rsync简介 Rsync是一款优秀的.快速的.多功能的本地或远程数据镜像同步备份工具.适用于unix/linux/windows等多种平台 从软件的名称Rsync(Remote Rynhroniza ...
- Kendo 计算字段
var Product = kendo.data.Model.define({ fields: { "quantity": { type: "number" } ...
- August 10th 2017 Week 32nd Thursday
Break through the psychological barrier to surpass themselves. 突破心理障碍,才能超越自己. To break through those ...