需要帮助将 jquery 更改为 javascript 以更改 function

Question

我正在尝试将一些 jQuery 代码更改为纯 JS 以进行呼叫 function。我不断收到以下错误 - 无法在“EventTarget”上执行“addEventListener”：参数 2 不是“Object”类型。

老的

$(document).on('change', '.js-variant-radio', onVariantRadioChange);

新的

document.querySelector('.js-variant-radio').addEventListener("change", onVariantRadioChange);

完整的代码块在这里

(function(){
  //START QUANTITY INPUT VALIDATION FUNCTION
  let
    onVariantRadioChange = function(event) {
      let
        $radio = document.querySelector(this),
        $form = $radio.closest('form'),
        max = $radio.attr('data-inventory-quantity'),
        $quantity = $form.querySelector('.js-quantity-field'),
        $addToCartButton = $form.querySelector('.add-to-cart-button');

      if($addToCartButton.prop('disabled') === true) {
        $addToCartButton.prop('disabled', false);
      }

      $quantity.attr('max', max);

      if (parseInt($quantity.value) > max) {
        $quantity.val(max).change();
      }
    };

    //END QUANTITY INPUT VALIDATION FUNCTION
})();

Answer 1

这是您在 vanillaJS 中的代码。 我唯一没有做的就是模仿附加的change()触发器

 document.addEventListener('DOMContentLoaded', () => { let onVariantRadioChange = function(event) { let $radio = event.target, $form = $radio.closest('form'), max = $radio.dataset['inventory-quantity'], $quantity = $form.querySelector('.js-quantity-field'), $addToCartButton = $form.querySelector('.add-to-cart-button'); if ($addToCartButton.getAttribute('disabled')) { $addToCartButton.removeAttribute('disabled'); } $quantity.setAttribute('max', max); if (parseInt($quantity.value) > max) { $quantity.value = max; } }; document.querySelectorAll('.js-variant-radio').foreach(el => el.addEventListener("change", onVariantRadioChange)); })

Answer 2

您仍在使用 jQuery 添加事件侦听器。尝试将其更改为：

const jsVariantRadio = document.getElementsByClassName('.js-variant-radio')[0];

jsVariantRadio.addEventListener('change', onVariantRadioChange);