Увеличение входного значения - что я здесь не так делаю?

Question

Я пытаюсь увеличить значение ввода кнопками + / -, но не могу понять, где моя проблема в том, что в данный момент он ничего не делает. Любая помощь приветствуется. Я знаю, что jquery теперь предлагает функциональность блесны в их UI-файле, но в этом случае это невозможно, и это не в моих руках.

HTML:

<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">

<a href="#" class="h5 title">TEST</a>
<div class="rating-wrap mb-3">
<a href="#" class="h6 title">TEST</a>
</div> <!-- rating-wrap.// -->

</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">

<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>

</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>

</div>
</div>

</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<a href="#" class="btn-link float-right"> <i class="far fa-heart"></i></a>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>  
<p>In Stock</p>
</div> <!-- info-price-detail // -->

<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<a href="#" class="btn  btn-outline-primary"> <span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>  </a>
</div>

</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>

JQUERY:

$(document).ready(function() {
var incrementPlus;
var incrementMinus;

var buttonPlus  = $("button#button-plus");
var buttonMinus = $("button#button-minus");

var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
    $n.val(Number( $n.val() ) + 1 );
});

var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
    var amount = Number($n.val());
    if (amount > 0) {
        $n.val(amount - 1);
    }
});
});

Answer 1

parent() метод переходит к непосредственному родительскому элементу элементов.

Вместо parent() следует использовать parents() или closest():

$(document).ready(function() {
var incrementPlus;
var incrementMinus;

var buttonPlus  = $("button#button-plus");
var buttonMinus = $("button#button-minus");

buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
  $n.val(Number( $n.val() ) + 1 );
});

buttonMinus.click(function() {
  var $n = $(this).parents("div.info-aside").find("input.qty");
    var amount = Number($n.val());
    if (amount > 0) {
        $n.val(amount - 1);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
  <div class="row no-gutters">
    <aside class="col-md-2">
      <a href="#" class="img-wrap">
        <span class="badge badge-danger"> SOMETHING </span>
        <img src="https://image.jpg">
      </a>
    </aside> <!-- col.// -->
    <div class="col-md-7">
      <div class="info-main">
      <div class="row">
      <div class="col-sm-12">

      <a href="#" class="h5 title">TEST</a>
      <div class="rating-wrap mb-3">
      <a href="#" class="h6 title">TEST</a>
      </div> <!-- rating-wrap.// -->

      </div>
      </div>
      <div class="row">
      <div class="col-sm-12 col-md-6">

      <ul class="productListItm">
      <li>
      <strong>AWP:</strong> $84.32
      </li>
      <li>
      <strong>WAC:</strong> $13.04
      </li>
      <li>
      <strong>Manufacturer:</strong> TEST
      </li>
      <li>
      <strong>Brand:</strong> TEST
      </li>
      </ul>

      </div>
      <div class="col-sm-12 col-md-6">
      <ul class="productListItm">
      <li>
      <strong>Lot:</strong> 369125
      </li>
      <li>
      <strong>Expires:</strong> 04/30/21
      </li>
      </ul>

      </div>
      </div>

      </div> <!-- info-main.// -->
      </div> <!-- col.// -->
    <aside class="col-sm-3">
    <div class="info-aside">
      <a href="#" class="btn-link float-right"> <i class="far fa-heart"></i></a>
      <div class="price-wrap">
      <span class="price h5"> $4.50 EA/1 </span>  
      <p>In Stock</p>
      </div> <!-- info-price-detail // -->

      <br>
      <div class="form-group col-md flex-grow-0">
      <div class="input-group mb-3 input-spinner">
      <div class="input-group-prepend">
      <button class="btn btn-light" type="button" id="button-plus"> + </button>
      </div>
      <input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
      <div class="input-group-append">
      <button class="btn btn-light" type="button" id="button-minus"> − </button>
      </div>
      </div>
      <a href="#" class="btn  btn-outline-primary"> <span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>  </a>
      </div>

      </div> <!-- info-aside.// -->
    </aside> <!-- col.// -->
  </div> <!-- row.// -->
</article>