jQuery如何复用多个相同的模块，让其之间不受影响

 

循环多个相同的计算加减模块，该如何用一个jQuery语句通用呢。

就是在this开始往父级找，找到再往下找就可以了

例子：

 

 

你可以复制多个 size-detail 块，他们可以共用jQuery语句，相互之间不受影响。

<div class="size-detail">
                <h4 class="size-title">Quantity:</h4>
                <div class="qty-counter">
                    <div class="input-group">
                        <button type="button" class="btn quantity-left-minus" data-type="minus" data-field="">
                            <img src="assets/svg/minus-square.svg" class="img-fluid" alt="">
                        </button>
                        <input type="text" name="quantity" class="form-control form-theme qty-input input-number"
                            value="1">
                        <button type="button" class="btn quantity-right-plus" data-type="plus" data-field="">
                            <img src="assets/svg/plus-square.svg" class="img-fluid" alt="">
                        </button>
                    </div>
                </div>
            </div>

 

 

Jquery。

/*=====================
 Quantity js
==========================*/
var minVal = 1, maxVal = 20; // Set Max and Min values
// Increase product quantity on cart page
$(".qty-counter .quantity-right-plus").on('click', function () {
    // 看这里，先找到父级的，再往下找。this是当前位置
  var $parentElm = $(this).parents(".qty-counter");
  $(this).addClass("clicked");
  setTimeout(function () {
    $(".clicked").removeClass("clicked");
  }, 100);
  var value = $parentElm.find(".input-number").val();
  if (value < maxVal) {
    value++;
  }
  $parentElm.find(".input-number").val(value);
});
// Decrease product quantity on cart page
$(".qty-counter .quantity-left-minus").on('click', function () {
  var $parentElm = $(this).parents(".qty-counter");
  $(this).addClass("clicked");
  setTimeout(function () {
    $(".clicked").removeClass("clicked");
  }, 100);
  var value = $parentElm.find(".input-number").val();
  if (value > 1) {
    value--;
  }
  $parentElm.find(".input-number").val(value);
});