如何实现同名div元素增减值控制，点击ADD按钮打印正确数值

核心问题 #

当前代码无法正确获取对应卡片中调整后的数值，原因有两点：

1. 重复ID：两个输入框的id均为extraDishcount，违反HTML中ID必须唯一的规范，可能导致选择器行为异常。
2. 全局选择器错误：extraDish函数中使用$('.extraDishcount').val()会直接选取页面中第一个匹配该类名的输入框值，无法区分点击的是哪个卡片的ADD按钮。

修复方案 #

1. 修正HTML（确保ID唯一，传递当前按钮上下文） #

修改两个卡片的输入框ID，并在ADD按钮的onclick事件中传入当前按钮元素：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 pb-6">
  <div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
    <div class="p-3 position-relative">
      <div class="list-card-body">
        <h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Raja</a></h5>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 float-end">
        <div class="d-flex p-3">
          <span class="count-number">
            <button type="button" class="btn-sm left dec btn btn-outline-secondary"> 
              <i class="feather-minus">-</i> 
            </button>
            <input class="count-number-input extraDishcount" id="extraDishcount-27" name="extraDishcount" type="text" value="30" readonly="">
            <button type="button" class="btn-sm right inc btn btn-outline-secondary"> 
              <i class="feather-plus">+</i>
            </button>
          </span>
          <span class="ms-auto">
            <button type="button" onclick="extraDish(this, '1.00','27','Tofu Sambal (+$1.00)')" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6 col-sm-6 pb-6">
  <div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
    <div class="p-3 position-relative">
      <div class="list-card-body">
        <h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Malar</a></h5>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 float-end">
        <div class="d-flex p-3">
          <span class="count-number">
            <button type="button" class="btn-sm left dec btn btn-outline-secondary"> 
             <i class="feather-minus">-</i> 
            </button>
            <input class="count-number-input extraDishcount" id="extraDishcount-30" name="extraDishcount" type="text" value="30" readonly="">
            <button type="button" class="btn-sm right inc btn btn-outline-secondary"> 
              <i class="feather-plus">+</i>
            </button>
          </span>
          <span class="ms-auto">
            <button type="button" onclick="extraDish(this, '0.80','30','Sambal Goreng ($0.80)')" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

2. 修正JavaScript（获取对应卡片的输入框值） #

修改extraDish函数，通过传入的按钮元素，向上找到共同父容器，再定位到当前卡片的输入框：

$('.dec').click(function() {
  var inputValue = $(this).next().val();
  var newValue = parseInt(inputValue) - 1;
  if (newValue >= 30) {
    $(this).next().val(newValue);
  }
});

$('.inc').click(function () {
    $(this).prev().val(+$(this).prev().val() + 1);
});

function extraDish(btn, extradishPrice, extraID, extraTitle) {
  // 从当前按钮所在的flex容器中找到对应的数值输入框
  var extraDishcount = $(btn).closest('.d-flex').find('.extraDishcount').val();
  console.log(extraDishcount);
}

验证效果 #

• 点击第一个卡片的+按钮将数值调到35，点击ADD按钮，控制台打印35；继续调到40点击ADD，打印40。
• 第二个卡片同理，调整数值后点击ADD，控制台会打印对应卡片的当前数值。

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