记录一个写项目遇到的问题:
使用<c:forEach标签遍历购物车商品,实现点击每个商品数量加减按钮,出现了给按钮绑定事件,只有点击购物车的第一个商品按钮才有效的问题(点击其他商品按钮没反应,浏览器和后端均不报错)
改了好久啊终于改好了〒▽〒
初步猜想: 遍历购物车商品数组时,事件可能只绑定了第一个商品,其他的商品没有获取到。
原因:
循环内是一组class或id相同的标签,而且是运行时动态加入页面的,如果用选择器直接获取var id=$("#id").val()
那么只可能获取的是第一个元素,所以点击按钮只有第一个有效(只有第一个元素绑定了事件)。
id选择器获取的永远都是第一个出现的dom!
也就是说,使用id选择器获取并不能获取到数组,而是第一个值
解决: 在html页面里动态添加的模块(循环),想要获取一组循环中的其中一个元素值:
使用document.getElementsByName("arrid");
获取一组name为arrid的元素数组,再使用下标取出其中一个元素。下标获取方法是,把button的value设置成序号,通过以下方式获取下标。
var status=$("button:focus").val();
注意以下方式的不同
//找到指定id属性值得对象 返回找到的一个对象
var id=document.getElementById("uid");
//找到指定name属性的对象,返回数组
var arr=document.getElementsByName("user");
//找到指定标签对象 ,返回数组
var arr=document.getElementsByTagName("input");
//找到指定class的对象,返回数组
var arr=document.getElementsByClassName("user");
项目实现购物车加减按钮部分代码如下:
1.html代码
<c:forEach items="${cartList}" var="cart" varStatus="status">
<tr>
<td>${status.index}</td>
<td><input type="checkbox" name="cartid" value="${cart.id}" class="input1" id="selectid"></td>
<td><img src="images/${cart.flowername}.jpg " width=150 height=150></td>
<td>${cart.flowername}</td>
<td>${cart.price}</td>
<td><span><button value="${status.index}" class="decnum">-</button></span>
<input type="hidden" name="arrid" value="${cart.id}">
<input type="text" value="${cart.num}" name="arrcartnum" class="cartnuminput">
<span><button class="addnum" value="${status.index}">+</button></span>
</td>
</tr>
</c:forEach>
2.js代码
$(function () {
//获取购物车id数组
var cartidarr=document.getElementsByName("arrid");
//获取购物车num数组
var cartnumarr=document.getElementsByName("arrcartnum");
$(".decnum").on("click",function () {
var userid=${user.id};//用户id
var status=$("button:focus").val();//通过鼠标焦点获取当前购物车编号
//alert("status="+status);
var deccartid=cartidarr[status].value;//获取当前购物车具体商品id
//alert("当前获取的购物车编id为:"+deccartid);
var cartnum=cartnumarr[status].value;//获取此购物车具体商品数量
//alert("cartnum="+cartnum);
if(cartnum>1){//商品数量未减到0
cartnum--;
$(".cartnuminput").val(cartnum);//前端修改页面显示数量
$.ajax({//通过ajax向后台传送数据修改数据库
data:{
userid:userid,
deccartid:deccartid
},
url:"deccartnum",
type:"post",
success:function (result) {
if(result>0){
alert("减少商品数量成功");
location.href="getallcarmessage?userid="+userid;
}else{
alert("减少商品数量失败");
}
}
});
}else{//删除商品
//alert("删除商品id为:"+deccartid);
$.ajax({
data:{
deccartid:deccartid
},
type:"post",
url:"cartdelete",
success:function (result) {
if(result>0){
alert("删除商品成功");
location.href="getallcarmessage?userid="+userid;
}else{
alert("删除商品失败");
}
}
});
}
});
$(".addnum").on("click",function () {
//alert("点击+按钮");
var userid=${user.id};//用户id
var status=$("button:focus").val();//通过鼠标焦点获取当前购物车编号
//alert("status="+status);
var addcartid=cartidarr[status].value;//获取当前购物车id
//alert("add id="+addcartid);
var cartnum=cartnumarr[status].value;//获取此购物车具体商品数量
//alert("cartnum="+cartnum);
if(cartnum<50){
cartnum++;
$.ajax({
data:{
addcartid:addcartid
},
url:"addcartnum",
type:"post",
success:function (result) {
if(result>0){
alert("增加商品数量成功");
location.href="getallcarmessage?userid="+userid;
}else{
alert("增加商品数量失败");
}
}
});
}else{
alert("您增加的商品已经超过上限,增加失败!");
}
});
});
希望以上笔记对你有帮助,如有错误,欢迎指正。
别忘了点完赞再划走呦~ヾ(✿゚▽゚)ノ感谢~