TypeError:<Array> .each不是函数

Question

所以我在我的页面上有三个引用三个下拉列表,并且每个都被更改,我想运行一个名为的JavaScript函数 validateForm();

我的代码如下:

jQuery(document).ready(function() {

    var drpSupplier         = document.getElementById('supplier');
    var drpChargeRate       = document.getElementById('formElementChargeRate');
    var drpIDSEmail         = document.getElementById('formElementEmailIDS');
    var formLevel2DDs       = new Array();

    formLevel2DDs.push(drpSupplier);
    formLevel2DDs.push(drpChargeRate);
    formLevel2DDs.push(drpIDSEmail);

    formLevel2DDs.each(function() {
        $(this).change(function() {
            validateForm()
        });
    });
});

但是这段代码给了我错误:

TypeError:formLevel2DDs.each不是函数

我非常感谢任何帮助.我正在使用jQuery版本1.8.3(它是一个遗留系统).

谢谢.

Answer 1

each阵列上没有任何功能.

正如安东在评论中指出的那样,你根本不需要each做什么; 见下面的折叠.

但如果你愿意each,你有三个选择:

1. 将数组包装在jQuery实例中并使用jQuery each:$(formLevel2DDs).each(function(index, entry) { ... });

2. 使用jQuery $.each:$.each(formLevel2DDs, function(index, entry) { ... });

   请注意,这与上面的功能不同.

3. 使用forEach(MDN | 规格):formLevel2DDs.forEach(function(entry, index, array) { ... });

   请注意,这forEach是ECMAScript5的新功能.所有现代浏览器都有它,但你需要一个垫片/ polyfill为旧的(如IE8).另请注意,回调参数的顺序与上述任一选项不同.

但对安东来说,你可以更简单地做到这一点:

getElementById在这种情况下没有理由直接使用它,它不是紧密循环或任何东西,所以:

jQuery(document).ready(function() {

    $("#supplier, #formElementChargeRate, #formElementEmailIDS").change(validateForm);

});

请注意,我还从周围删除了包装函数validateForm.如果validateForm有返回值,您可能需要将其添加回来,并且您不希望jQuery使用该返回值(具体来说:如果返回false,jQuery将停止传播并阻止change事件的默认操作).

如果您真的想使用这些变量直接访问DOM元素:

jQuery(document).ready(function() {

    var drpSupplier, drpChargeRate, drpIDSEmail;
    var formLevel2DDs       = [
        drpSupplier         = document.getElementById('supplier'),
        drpChargeRate       = document.getElementById('formElementChargeRate'),
        drpIDSEmail         = document.getElementById('formElementEmailIDS')
    ];

    $(formLevel2DDs).change(validateForm);
});

Answer 2

如果你想使用.each()你必须像这样用jQuery包装数组

$(formLevel2DDs).each(function() {

在这种情况下没有必要使用循环，只需.change()在用 jQuery 包装的数组上使用

$(formLevel2DDs).change(function(){
       validateForm()
});