JavaScript访问HTML父元素子标签实现点餐数量价格联动方法

核心问题修正：DOM父子元素访问方法 #

不需要手动逐层遍历ul下的li子节点判断属性，直接用原生DOM的范围查询方法即可精准定位元素：针对每个菜品对应的<li>容器（即#food_tracker下的单个列表项），调用Element.querySelector()/Element.querySelectorAll()，可以直接定位当前容器内任意class、标签的子元素，不会和其他菜品的元素串数据。
常用定位示例（class名可替换为你代码里的实际命名）：

• 找到当前菜品li内的勾选框：liElem.querySelector('.food-check')
• 找到当前菜品li内的数量显示/输入框：liElem.querySelector('.food-count')
• 找到当前菜品li内的单价存储节点：liElem.querySelector('.food-price')
• 找到当前菜品li内的单品小计显示节点：liElem.querySelector('.food-subtotal')
• 找到当前菜品li内的加/减按钮：liElem.querySelector('.count-plus')/liElem.querySelector('.count-minus')

注意：查询方法前必须加对应的li父元素作为查询范围，直接全局查询会匹配到页面所有同名元素，导致逻辑错乱。

分步实现交互逻辑 #

1. 初始状态锁定 #

页面加载完成后，先遍历所有菜品li，默认禁用未勾选菜品的数量操作控件，从入口避免非法操作：

// 获取所有菜品列表项
const foodItems = document.querySelectorAll('#food_tracker li')
foodItems.forEach(li => {
  const checkBox = li.querySelector('.food-check')
  const minusBtn = li.querySelector('.count-minus')
  const plusBtn = li.querySelector('.count-plus')
  const countInput = li.querySelector('.food-count')
  // 未选中状态下禁用所有数量操作控件
  ;[minusBtn, plusBtn, countInput].forEach(elem => elem.disabled = !checkBox.checked)
})

2. 勾选状态联动逻辑 #

给每个checkbox绑定状态变更事件，勾选时解锁当前菜品的数量操作控件，取消勾选时重置数量、锁定控件、清空单品小计：

foodItems.forEach(li => {
  const checkBox = li.querySelector('.food-check')
  checkBox.addEventListener('change', () => {
    const minusBtn = li.querySelector('.count-minus')
    const plusBtn = li.querySelector('.count-plus')
    const countInput = li.querySelector('.food-count')
    const subtotalElem = li.querySelector('.food-subtotal')
    // 单价存在DOM的data-price属性上，比直接解析文本更稳定
    const price = parseFloat(li.querySelector('.food-price').dataset.price)
    
    if (checkBox.checked) {
      // 解锁控件，初始化数量为1
      ;[minusBtn, plusBtn, countInput].forEach(elem => elem.disabled = false)
      countInput.value = 1
      subtotalElem.textContent = (price * 1).toFixed(2)
    } else {
      // 锁定控件，重置数据
      ;[minusBtn, plusBtn, countInput].forEach(elem => elem.disabled = true)
      countInput.value = 0
      subtotalElem.textContent = '0.00'
    }
    // 状态变更后同步更新订单总价
    calcTotal()
  })
})

3. 加减按钮数量调整逻辑 #

给每个加减按钮绑定点击事件，加一层选中状态判断兜底，调整数量时限制最小值为1，调整完成后同步计算当前菜品的小计：

foodItems.forEach(li => {
  const minusBtn = li.querySelector('.count-minus')
  const plusBtn = li.querySelector('.count-plus')
  const countInput = li.querySelector('.food-count')
  const checkBox = li.querySelector('.food-check')
  const price = parseFloat(li.querySelector('.food-price').dataset.price)
  const subtotalElem = li.querySelector('.food-subtotal')

  minusBtn.addEventListener('click', () => {
    if (!checkBox.checked) return // 未选中直接拦截操作
    let currentCount = parseInt(countInput.value)
    if (currentCount > 1) { // 单菜品最少选1份
      currentCount--
      countInput.value = currentCount
      subtotalElem.textContent = (price * currentCount).toFixed(2)
      calcTotal()
    }
  })

  plusBtn.addEventListener('click', () => {
    if (!checkBox.checked) return
    let currentCount = parseInt(countInput.value)
    currentCount++
    countInput.value = currentCount
    subtotalElem.textContent = (price * currentCount).toFixed(2)
    calcTotal()
  })

  // 如需支持手动输入数量，补充input事件监听即可
  countInput.addEventListener('input', () => {
    if (!checkBox.checked) return
    let currentCount = parseInt(countInput.value)
    // 非法输入兜底
    if (isNaN(currentCount) || currentCount < 1) currentCount = 1
    countInput.value = currentCount
    subtotalElem.textContent = (price * currentCount).toFixed(2)
    calcTotal()
  })
})

4. 总价联动计算 #

封装公共的总价计算方法，每次数量、勾选状态变动时，遍历所有已勾选菜品的小计值求和，渲染到总价展示位置：

function calcTotal() {
  let total = 0
  const totalElem = document.querySelector('#order-total') // 替换为你的总价展示元素选择器
  foodItems.forEach(li => {
    const checkBox = li.querySelector('.food-check')
    if (checkBox.checked) {
      const subtotal = parseFloat(li.querySelector('.food-subtotal').textContent)
      total += subtotal
    }
  })
  totalElem.textContent = total.toFixed(2)
}

HTML结构适配提示 #

参考结构给元素加上对应class和数据属性，避免硬解析文本导致的计算错误：

<form>
  <ul id="food_tracker">
    <li>
      <input type="checkbox" class="food-check">
      <span class="food-name">番茄炒蛋</span>
      <!-- 单价存在data自定义属性上，和展示文本解耦 -->
      <span class="food-price" data-price="18">¥18.00</span>
      <!-- 加减按钮必须加type="button"，否则会默认触发表单提交刷新页面 -->
      <button class="count-minus" type="button">-</button>
      <input type="text" class="food-count" value="0" readonly>
      <button class="count-plus" type="button">+</button>
      <span>小计：¥<span class="food-subtotal">0.00</span></span>
    </li>
    <!-- 其余菜品项保持和上面一致的结构即可 -->
  </ul>
  <div>订单总价：¥<span id="order-total">0.00</span></div>
</form>

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