javascript – 为什么我不能在同一个js文件中建立两个cleave.js格式的字段?

我想使用cleave.js(在rails中)格式化电话和信用卡输入.如果我只声明一个新的Cleave对象,我的格式化工作,但如果我尝试声明两个,我会收到此错误:

未捕获错误:[cleave.js]请检查元素

这是JS文件的相关部分:

var Global = {};

Global.onLoad = function(){
  Global.setupDatepickers(); //unrelated function
  Global.setupCleavePhone();
  Global.setupCleaveCreditCard();
};

$(document).on('turbolinks:load', function(){
  Global.onLoad();
});

Global.setupCleavePhone = function() {
  new Cleave('.phone-input', {
    phone: true,
    phoneRegionCode: 'US',
    delimiter: '-'
  });
}

Global.setupCleaveCreditCard = function() {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

我已经尝试了一些混音,包括将Cleave对象分配给变量并在同一个函数中声明它们,但没有骰子.这里有一个jsfiddle的多个切割对象一次被延迟,我看不出我的代码和他们的代码之间有任何有意义的差异.选择器类在视图中正确应用.有什么想法,我似乎无法一次格式化两个字段?

最佳答案
解决了:

事实证明,它需要存在的对象才能运行新的Cleave.如果页面上不存在其中一个元素,则整个事情由于某种原因而失败.我最终将包装每个新的Cleave,检查是否存在具有该类的元素,例如:

if ($('.card-input').length) {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

更新:

或者甚至更好,如果你像我一样,需要在页面上格式化同一个类的多个对象(这导致cleave只用上面的代码格式化第一个)检索对象数组并在每个对象上运行cleave .它执行相同的“它存在”检查以及格式化每个对象.例如:

for(let field of $('.zip_code').toArray()){
  new Cleave(field, {
    numericOnly: true,
    delimiter: ' ',
    blocks: [5,4]
  });
}

再次更新:

事实证明,上面的内容并不理想,因为据我所知,上面的let-of循环(如for-in循环)将遍历数组的可枚举对象,而不是仅仅遍及其索引.如果您也想解释这是什么,请看看这个答案:For-each over an array in JavaScript?.

同样,我无法预编译我的资产用于生产,因为它讨厌使用let,并且在改变let-of for-for也工作的同时,我最终选择了更具体的forEach循环.

$('.zip-code').toArray().forEach(function(field){
   new Cleave(field, {
      numericOnly: true,
      delimiter: ' ',
      blocks: [5,4]
   })
});

转载注明原文:javascript – 为什么我不能在同一个js文件中建立两个cleave.js格式的字段? - 代码日志