如何在无class、id的div中获取指定name的input值并计算购物车数量

解决方案 #

1. 精准获取指定name的input值 #

jQuery原生支持属性选择器，直接通过[name="目标值"]即可精准匹配到你要的单个输入框：

// 直接获取name=367303的input的当前值
const targetInputVal = $('input[name="367303"]').val();
console.log(targetInputVal); // 你修改为5后这里输出就是5

2. 适配购物车场景的通用更新逻辑 #

如果你的需求是修改任意输入框后，只更新它所属分组的总数量，不需要硬编码name值，可以直接用下面的逻辑，适配所有分组的数量更新：

// 给所有数量输入框绑定值变化监听事件
$('.num').on('input', function() {
  // 拿到当前修改的输入框所属的父级分组div
  const currentGroup = $(this).closest('div');
  // 只计算当前分组内所有数量输入框的总和
  let groupTotal = 0;
  currentGroup.find('.num').each(function() {
    // 加容错处理，避免输入非数字时报错
    groupTotal += parseInt($(this).val()) || 0;
  });
  // 更新当前分组的总数量显示
  currentGroup.find('h3').text(`total Quantity is: ${groupTotal}`);
});

原有代码问题说明 #

• $('.num').each() 会匹配页面所有带num类的输入框，所以会把4个分组的所有输入值累加
• $('.num').parent().find('input') 会先匹配所有.num的父元素，再查找父元素下所有input，自然会匹配到全部5个输入框，默认只会返回第一个输入框的value值

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