jQuery內容文字值||購物車案例-增減數量模組思路分析
阿新 • • 發佈：2021-07-17
【要求】
點選加號或減號相應文字框值中數量發生變化
【分析】
1、核心思路:首先宣告一個變數,當我們點選+號，就讓這個值++，然後重新賦值給文字框
2、注意1：只能增加本商品的數量，就是當前+號的兄弟文字框itxt的值。所以必須從$(this)出發去找
3、修改表單的值是val()方法
4、注意2：這個變數的初始值應該是這個文字框的初始值，在這值的基礎上++。要獲取表單的值
5、減號的思路同理，但是如果文字框的是1，就不能再減，利用return false跳出當前的函式
【程式碼】
html程式碼：
<body> <div class="countbox"><h4>數量</h4> <div class="quantity"> <a href="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="increment">+</a> </div> <div class="quantity"> <a href="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="increment">+</a> </div> <div class="quantity"> <ahref="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="increment">+</a> </div> </div> </body>
js程式碼：
<!--引入jquery.mini.js檔案--><script src="jquery.mini.js"></script> <script> $(function() { //1、 減號 $(".decrement").click(function() { //得到當前被點選加號+的兄弟文字框的值 var num = $(this).siblings(".itxt").val(); if (num == 1) { return false; } num--; $(this).siblings(".itxt").val(num); }); // 2、加號 $(".increment").click(function() { //得到當前被點選減號-的兄弟文字框的值 var num = $(this).siblings(".itxt").val(); num++; $(this).siblings(".itxt").val(num); }) }) </script>
【效果】