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 ...
随机推荐
- IEC62304-2006解读
IEC62304强调医疗软件在明确和满足其预期用途的前提下,不能引发不可接受的风险 62304提供一个医疗软件开发的框架,并指出框架下每个过程的要求,62304将过程分解为若干活动,活动分解为若干任务 ...
- iOS设计模式 - 装饰
iOS设计模式 - 装饰 原理图 说明 1. cocoa框架本身实现了装饰模式(category的方式实现了装饰模式) 2. 装饰模式指的是动态的给一个对象添加一些额外的职责,相对于继承子类来说,装饰 ...
- [翻译] IQAudioRecorderController
IQAudioRecorderController IQAudioRecorderController is a drop-in universal library allows to record ...
- git使用教程2-更新github上代码
前面一篇已经实现首次上传代码到github了,迈出了装逼第一步,本篇继续讲如何把本地更新的代码同步更新到github上 一.clone代码 1.把大神的代码clone到本地,或者clone自己gith ...
- C# Razor 小笔记和某些细节
知识小结:C# 的主要 Razor 语法规则 单独一个变量直接使用 @a 的形式,无需加分号,一般是直接使用已有变量,注意在使用 html 标签时,要和 razor 表达式加一个空格. //不能有空格 ...
- github发布静态页面
github发布静态页面:https://wangc1993.github.io/2019/01/07/2/
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- Django F对象的使用
概念 class FF()是代表模型字段的值,也就是说对于一些特殊的字段的操作,我们不需要用Python把数据先取到内存中,然后操作,在存储到db中了. 场景 例1:我们有个统计点击量的字段,每次更新 ...
- linux服务器部署nodejs项目
一.安装nodejs 1.去官网下载和自己系统匹配的文件: 英文网址:https://nodejs.org/en/download/ 中文网址:http://nodejs.cn/download/ 通 ...
- 【[HAOI2015]树上染色】
这道题真是非常神仙 第一眼看到题面肯定能想到状态是\(dp[i][j]\)表示\(i\)这棵子树里染了\(j\)个黑点的最大值 最大值? 什么最大值,之后就会发现这个样子完全没有办法转移 所以我们考虑 ...