jQuery+Laravel中多个元素存在同名class时如何获取指定对应值

使用全局类选择器$(".id")、$(".prod_id")取值时，jQuery会匹配页面内所有符合条件的元素，.val()方法默认仅返回第一个匹配元素的数值，因此无论点击哪个商品的按钮，都会返回第一条数据的对应值。

基于点击事件的触发上下文，先定位当前商品的父容器，再从父容器范围内查询对应字段即可：

$(".plus").click(function(e) {
  // 定位当前点击按钮所属的商品容器
  const currentCartItem = $(this).closest('.number-input');
  // 仅在当前商品容器内查询对应字段值
  const id = currentCartItem.find('.id').val();
  const product_id = currentCartItem.find('.prod_id').val();
  const quantity = currentCartItem.find('.quantity').val();
  
  console.log(id);
  console.log(product_id);
  // 原有后续逻辑保持不变
  ...
});

你当前的Blade代码中输入框设置了固定id="qty"，如果是循环渲染多个商品的场景，会导致页面出现重复ID，不符合HTML规范。如果不需要用到ID选择器可以直接删除该属性，如需保留可以改为动态拼接ID，例如id="qty_{{ $cart->id }}"。

内容的提问来源于stack exchange，提问作者Catto