关于js一组按钮绑定一个事件——只点击第一个按钮有效的问题

本文链接：https://blog.csdn.net/qq_44398094/article/details/123506102

记录一个写项目遇到的问题：
使用<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("您增加的商品已经超过上限，增加失败！");
                  }
              });
               });