尝试在数量选择器中添加加减，但 jquery 不起作用（shopify 液体首次亮相主题）

Question

这是我的代码：

在product-template.liquid

<div class="product-form__controls-group">
 <div class="product-form__item">
  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
  <div class="qty-box">
   <span class="qty-btn qty-minus">-</span>
   <input type="number" id="Quantity-{{ section.id }}"
   name="quantity" value="1" min="1" pattern="[0-9]*"
   class="product-form__input product-form__input--quantity" data-quantity-input
   >
   <span class="qty-btn qty-plus">+</span>
  </div>
</div>
</div>

在qty.liquid 中，我包括在theme.liquid 中

<style>
  .qty-btn {
    display: flex;
    cursor: pointer;
    border-top: 1px solid var(--color-border-form);
    border-bottom: 1px solid var(--color-border-form);
    background-color: var(--color-text-field);
    color: var(--color-text-field-text);
    border-radius: 2px;
    line-height: 1.2;
    height: 44px;
    width:30px;
    align-items: center;
    justify-content: center;
  }

  .qty-minus {
    border-left: 1px solid var(--color-border-form);
  }

  .qty-plus {
    border-right: 1px solid var(--color-border-form);
  }

  .qty-box {
      display: flex;
  }
</style>

<script>
  $('.qty-box .qty-btn').on('click', function(){
    var qty = parseInt($(this).parent('.qty-box').find('.product-form__input').val());
    if($(this).hasClass('qty-plus')) {
      qty++;
    }else {
      if(qty > 1) {
        qty--;
      }
    }
    qty = (isNaN(qty))?1:qty;
    $(this).parent('.qty-box').find('.product-form__input').val(qty);
  }); 
</script>

样式有效，jquery 无效，但我通过查看浏览器控制台看到 jquery 存在，控制台也没有错误，我想我错过了一些简单的东西，有什么问题？

我从这里https://community.shopify.com/c/Shopify-Design/Add-Quantity-Buttons-to-Debut-Theme/td-p/593001修改了解决方案

Answer 1

原来我忽略了控制台中的“jQuery not defined”，所以我自己包含了 jQuery 文件

问题解决了

我还是不太明白为什么我必须再次添加文件，因为我确定 jQuery 已经定义（我通过登录控制台确认了这一点）