JQuery之 加減(Part9)
2019-04-15 10:20
621 查看
今天來講一個點擊加則加一,點擊-則減一的功能編寫。
效果如下:
說明:
最小為1,最大為10,自己也可以更改的哈。
css
[code] .buy .com_symbol { height:20px; color:#FFF; font-weight:500; text-align:center; display:inline-block; padding:0 10px; line-height:20px; cursor:pointer; } .buy .com_symbol:hover { background:#556986; color:#FFF; } .buy { min-width:30%; max-width:50%; background:#475a76; color:#8baadb; height:20px; display: inline-block; text-align:center; line-height:20px; }
jq:
[code] <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var purchase = ''; $(function () { $('.reduce').click(function () { if (purchase == '' || purchase == null || purchase == 0) { var purchase = $('.purchase').text(); } if (purchase == '1') { return false; } if (purchase < 10) { $('.tishi').text(''); } var res = parseInt(purchase) - 1; $('.purchase').text(res); }) $('.plus').click(function () { if (purchase == '' || purchase == null || purchase == 0) { var purchase = $('.purchase').text(); } if (purchase > 10 || purchase == 10) { $('.tishi').text('XXX'); return false; } var res = parseInt(purchase) + 1; $('.purchase').text(res); }) }) </script>
HTML:
[code]<div class="buy"> <span class="fl"> <div class="reduce com_symbol">-</div> </span> <span class="purchase">1</span> <span class="fr"> <div class="plus com_symbol">+</div> </span> </div>
相关文章推荐
- Porfessional JS(21.2-XMLHttpRequest Level 2/Progress Event/CORS)& Sharp jQuery(selectors[part])
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
- jQuery is DSL (Part 1 - DSL)
- Improving PeopleSoft with jQuery - Some Examples (Part 2)
- Improving PeopleSoft with jQuery - Some Examples (Part 1)
- jQuery is DSL (Part 2 - jQuery)
- jquery uploadify的使用
- jQuery(5)--实现checkbox的全选,反选,全不选功能
- jQuery解决iframe高度自适应的一例代码
- PHP+MySQL+jQuery实现发布微博程序――PHP篇
- jQuery&HTML5 UI框架Ignite UI 13.2新功能大揭秘(二)
- 关于Jquery执行环境的认识
- jQuery 计算iframe 窗口大小的方法
- 引入jquery时多个js库的冲突解决
- 如何设置jquery的ajax方法为同步
- JQuery选择器中使用正则表达式实例
- Jquery改变TABLE样式几种效果
- 强大的jquery,再次让我为之鼓掌——三维展示插件
- 利用jQuery 实现GridView异步排序、分页的代码
- jquery弹出层实例