javascript - 在 php 循环中单击复选框时将 1 添加到输入值

Question

我想在选中复选框时为输入值添加 +1。我已经尝试过这段代码，但在循环内不起作用。我需要在 php 循环内进行这项工作，因此，只需要在连接的输入上工作。

这是我的代码

<div class="mix ">

        <div class="img-card">
          <img src="<?= $product->image_card ?>">
        </div>
        <p><?= $product->sub_title; ?></p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-<?= $product->sub_title ?>" id="<?= $product->sub_title ?>" value="SI" />
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-<?= $product->sub_title ?>" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          </div>
        </div>

并给我这个 html:

<div class="mix">

        <div class="img-card">
          <img src="...">
        </div>
        <p>P Name</p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-name" id="P-ID" value="SI">
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-NIA - front desk" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          <span class="tiny-button-form minus"><strong>–</strong></span></span></div>
        </div>
      </div>

这是我的 jQuery

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).closest('.mix').addClass("checked");
        var $input = $('.mix.checked .contatore');
        var num = parseInt($input.val());
        var newNum = num + 1;
        $input.val(newNum);
    } else {
        $(this).closest('.mix').removeClass("checked");
        var $input = $('.mix .contatore');
        var num = parseInt($input.val());
        var newNum = num * 0;
        $input.val(newNum);
    }
});

当我单击复选框时，将 1 添加到输入数字，当我单击复选框时，输入数字为零。

但是如何让它只在连接的盒子上工作而不是在所有盒子上工作？

可能不必使用检查的类，但我已经尝试使用closest、find、子级或父级。

Answer 1

假设您有多组重复元素，位置选择器就可以工作。

您的代码中的问题具体是这一行:

var $input = $('.mix.checked .contatore');

该行忽略位置，只应查看 closest具有该类的元素，就像该类上方的行一样。

此外，您在函数中重新声明相同的变量。无需这样做。我稍微清理了代码并修复了位置选择器。

您还缺少一个结束语 </span>在您的示例代码中，您没有发布超过 1 组，因此我必须编写自己的重复组，希望与您的尽可能匹配。

下面的代码单独处理每个集合，仅向与同一集合中的复选框匹配的输入添加 +1，而不是向所有输入添加 +1。

$('input:checkbox').change(function() {
  var $closestParent = $(this).closest('.mix'),
    $input = $closestParent.find('.contatore'),
    num = parseInt($input.val()),
    newNum

  if ($(this).is(":checked")) {
    $closestParent.addClass("checked");
    newNum = num + 1;
  } else {
    $closestParent.removeClass("checked");
    newNum = num * 0;
  }
  
  $input.val(newNum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>