<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.min.js"></script> </head> <body> <div class="num"> <div class="p-price">￥12.6</div> <div class="quantitu-form"> <a href="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="crement">+</a> </div> <div class="p-sum">￥12.6</div> </div> <div class="num"></div> <div class="p-price">￥12.6</div> <div class="quantitu-form"> <a href="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="crement">+</a> </div> <div class="p-sum">￥12.6</div> <div class="num"> <div class="p-price">￥12.6</div> <div class="quantitu-form"> <a href="javascript:;" class="decrement">-</a> <input type="text" class="itxt" value="1"> <a href="javascript:;" class="crement">+</a> </div> <div class="p-sum">￥12.6</div> </div> <script> //点击加号 取的兄弟文本框的值 $(function() { $(".crement").click(function() { //得到兄弟文本框的值 var n = $(this).siblings(".itxt").val(); n++; $(this).siblings(".itxt").val(n); //得到商品价格 var p = $(this).parent().siblings(".p-price").html(); //当前商品的价格 p = p.substr(1); var p = $(this).parent().siblings(".p-sum").html("￥" + p * n); }); $(".decrement").click(function() { //得到兄弟文本框的值 var n = $(this).siblings(".itxt").val(); if (n == 1) { return false; } n--; $(this).siblings(".itxt").val(n); //得到商品价格 var p = $(this).parent().siblings(".p-price").html(); //当前商品的价格 p = p.substr(1); var p = $(this).parent().siblings(".p-sum").html("￥" + p * n); }); //修改小计 $(".itxt").change(function() { var n = $(this).val(); var p = $(this).parent().siblings(".p-price").html(); //当前商品的价格 p = p.substr(1); var p = $(this).parent().siblings(".p-sum").html("￥" + p * n); }); }) </script> </body> </html>
