博主在写购物车项目时,在对购物车的物品数量加减时,需要同时对数据库进行修改,但是一直都是只能修改第一条物品的数量。后来终于解决,话不多说,先上代码
jsp的forEach部分:
<c:forEach items="${list }" var="cart" varStatus="status">
<tr class="cartProductItemTR" oiid="${cart.goodsId}">
<td>
<img src="image/cartNotSelected.png" class="cartProductItemIfSelected" oiid="${cart.goodsId}" selectit="false">
<a href="#nowhere" style="display:none"><img src="image/cartSelected.png"></a>
<img src="image/菠萝mate40pro.png" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">${cart.goodsName}</a>
<div>
<img src="https://gw.alicdn.com/tfs/TB1XY8mheH2gK0jSZFEXXcqMpXa-63-16.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemPromotionPrice">¥${cart.goodsPrice}0</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="${cart.goodsId}" class="hidden orderItemStock ">${cart.goodsId}</span>
<span pid="${cart.goodsId}" class="hidden orderItemPromotePrice ">¥${cart.goodsPrice}0</span>
<a href="#nowhere" class="numberMinus" pid="${cart.goodsId}" id="${cart.goodsId}" >-</a>
<input value="${cart.goodsNumber}" autocomplete="off" class="orderItemNumberSetting" oiid="${cart.goodsId}" pid="${cart.goodsId}" id="${cart.goodsId}">
<a href="#nowhere" class="numberPlus" pid="${cart.goodsId}" stock="${cart.goodsId}" id="${cart.goodsId}">+</a>
</div>
</td>
<td>
<span pid="${cart.goodsId}" oiid="${cart.goodsId}" id="cartProductItemSmallSumPrice" class="cartProductItemSmallSumPrice">
¥${cart.goodsPrice * cart.goodsNumber}
</span>
</td>
<td>
<a href="#nowhere" oiid="${cart.goodsId}" class="deleteOrderItem">删除</a>
</td>
</tr>
</c:forEach>
未修改前的js部分:
<script>
$(function (){
//点击+增加数量
$(".numberPlus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
++num;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+$("[name='goodsId']").val()+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
//键盘输入数量
$(".orderItemNumberSetting").keyup(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
num = parseInt(num);
if(isNaN(num))
{num= 1;
}
if(num<=0)
num = 1;
if(num>stock)
num = stock;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
//改变金额
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+$("[name='goodsId']").val()+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
//点击-减少数量
$(".numberMinus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
--num;
if(num==0)num=1;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+$("[name='goodsId']").val()+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
})
</script>
修改后:
<script>
$(function (){
//点击+增加数量
$(".numberPlus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
++num;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
var goodsId =$(this).attr("id");
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+goodsId+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
//键盘输入数量
$(".orderItemNumberSetting").keyup(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
num = parseInt(num);
if(isNaN(num))
{num= 1;
}
if(num<=0)
num = 1;
if(num>stock)
num = stock;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
//改变金额
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
var goodsId =$(this).attr("id");
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+goodsId+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
//点击-减少数量
$(".numberMinus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
--num;
if(num==0)num=1;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+price);
var goodsId =$(this).attr("id");
$.ajax({
type:"post",
url:"updateCartNumber?goodsNumber="+num+"&&goodsId="+goodsId+"&&userId="+$("[name='userId']").val(),
dataType:"text",
success:function (data) {
if(data==1){
}
}
})
getPrice();
});
})
</script>
其实就是加了一句话的原因,就在$.ajax上方加上var goodsId =$(this).attr("id");当被点击时候,获取对应的id,而我的id就是我需要的值。如果有什么疑问可以私信我哈