jquery购物车添加功能
2024-08-20 22:05:34
<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>
最新文章
- ios语音输入崩溃
- Grandle全局变量定义及引用
- 深入JVM-垃圾收集器常用的GC参数
- java中byte数据转换为c#的byte数据
- 【SNMP】Linux系统下安装net-snmp
- AndroidApplication Fundamentals(Android应用基础)
- echarts 折线柱形上方显示自定义格式数据
- glsl-UBO
- 读取XML文件的几种方式的效率分析
- 让2个并列的div根据内容自动保持同等高度js
- Apache Ranger对HDFS的访问权限控制的原理分析（一）
- bs4模块
- pycharm的list中append的应用
- .NET [MVC] 利用特性捕捉异常
- 如何在Eclipse中Debug调试Java代码
- Oracle12c 从入门到精通(第二版) 闫红岩 金松河 编著
- sharepoint2013 Restore-SPSite 报错，采用数据库还原
- python笔记9-字符串操作
- Java实现用汉明距离进行图片相似度检测的
- ISO8601时间格式