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 ...
随机推荐
- SQL Server 表的管理_关于事务操作的详解（案例代码）
SQL Server 表的管理_关于事务操作的详解(案例代码) 1.概念 事务(transaction): 是将多个修改语句组合在一起的方法,这个方法中的所有语句只有全部执行才能正确完成功能.即要么全 ...
- Python学习---Django下的Sql性能的测试
安装django-debug-tools Python学习---django-debug-tools安装 性能测试: settings.py INSTALLED_APPS = [ ... 'app01 ...
- cin读取不知行列数的矩阵以及带逗号的整型数据
摘要:如果输入中给出了一个矩阵的具体的行列数,那很好办,循环读取就行了,如果没有给你具体的行列数,而且输入中的整型数据之间还有逗号,那应该怎么来读取呢?下面给出具体代码: 一.输入没有给出矩阵的具体行 ...
- 沉淀再出发:java中的equals()辨析
沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...
- matlab中的决策树
1.函数 view(t)%画出决策树 prune %剪枝决策树 t2=prune(t,'level','level'/'node')%level:0 不剪枝 1 剪掉最后一层 2 最后两层%node: ...
- August 04th 2017 Week 31st Friday
Love is a vine that grows into our hearts. 爱是长在我们心里的藤蔓. What is love? Maybe no one can explain it cl ...
- linux下的线程学习（二）
#include <iostream> #include <pthread.h> void cleanup(void *arg) { printf("cleanup: ...
- Tuple元组 、 ValueTuple 值元组详解
Tuple元组 Tuple是C# 4.0时出的新特性,.Net Framework 4.0以上版本可用. 元组是一种数据结构,具有特定数量和元素序列,与数组不同,元祖中的元素可以不同的数据类型.比如设 ...
- codeforces 407C Curious Array
codeforces 407C Curious Array UPD: 我觉得这个做法比较好理解啊 参考题解:https://www.cnblogs.com/ChopsticksAN/p/4908377 ...
- Oracle 11g简体中文版的安装过程及图解
1.下载Oracle 11g 地址 http://download.oracle.com/otn/nt/oracle11g/win32_11gR1_database_1013.zip 基本安装 解压缩 ...