Javascript 动态初始化插件中的多个输入字段

我在一页上有许多表格。每个表单都应该有一个电话号码字段。这些字段由JS

插件驱动

因此，我得到了大量应该正确初始化的字段。
如果我手动执行，我将获得：
表单
*
电话输入字段
=
初始化次数

此时此刻，我只有第一次实地工作。其他不初始化

我的标记看起来像：

<input type="tel" class="phone_flag" name="phone_tab1[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab2[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab3[main]" required="">
xxx
...

   document.querySelectorAll('.phone_flag').forEach(el => { 
        PhoneDisplay(el.className);     
    });

    function PhoneDisplay(ClassName){

      var input = document.querySelector('.' + `${ClassName}`);   
      var iti = window.intlTelInput(input, {
          hiddenInput: "full",
          initialCountry: "auto",
          geoIpLookup: function(callback) {
            $.get('proxy.php', function() {}).always(function(resp) {
              var countryCode = (resp && resp.country) ? resp.country : "";
              callback(countryCode);
            });
          },    
          hiddenInput: "full_phone",
          utilsScript: "intlTelInput/js/utils.js"
      });

        var reset = function() {
          input.classList.remove("error");
          errorMsg.innerHTML = "";
          errorMsg.classList.add("hide");
          validMsg.classList.add("hide");
        };

        input.addEventListener('blur', function() {
          reset();
          if (input.value.trim()) {
            if (iti.isValidNumber()) {
              validMsg.classList.remove("hide");
            } else {
              input.classList.add("error");
              var errorCode = iti.getValidationError();
              errorMsg.innerHTML = errorMap[errorCode];
              errorMsg.classList.remove("hide");
            }
          }
        });

        input.addEventListener('change', reset);
        input.addEventListener('keyup', reset);           
    }

document.querySelector
返回第一个查询，因此
var input
始终是第一个输入。您应该在forEach循环中传入元素本身：
PhoneDisplay（el）
然后
函数PhoneDisplay（input）
并删除'var input='行。
文档。querySelector
返回第一个查询，因此
var input
始终是第一个输入。您应该在forEach循环中传入元素本身：
PhoneDisplay（el）
然后
函数PhoneDisplay（input）
并删除'var input='行。
文档。querySelector
返回第一个查询，因此您的
var input
始终是第一个输入。您应该在forEach循环中传入元素本身：
PhoneDisplay（el）
然后
函数电话显示（输入）
并删除'var input='行。谢谢！这部分工作正常，但有一个问题：带有验证的部分不工作。有什么线索吗？控制台中出现了什么错误？
document.querySelector
返回第一个查询，因此您的
var输入始终是第一个输入。您应该在forEach循环中传入元素本身：
PhoneDisplay（el）
然后
函数电话显示（输入）
并删除'var input='行。谢谢！这部分工作正常，但有一个问题：带有验证的部分不工作。有什么线索吗？你在控制台里发现了什么错误？