Javascript 向数组中添加html div

我有以下HTML div，它们保留用户的发货信息。我正在创建一种方法，如果他们愿意，可以将他们的信息复制到账单部分，但也要确保他们确实复制了一些内容，而不是一个空字段。我的检查代码实际上可以工作，但我想避免像以前那样检查每个div

有没有一种方法可以将所有这些div添加到数组中，并在数组中进行迭代和检查

document.querySelector（'sameAsBilling'）.addEventListener（'click'，checkEmpty）；
函数checkEmpty（）{
var shippingName=document.getElementById（'shipping_firstname'）。值；
如果（shippingName==“”）{
jQuery（“#shipping_firstname”）.attr（“占位符”，“在此处输入详细信息”）；
document.getElementById（“shipping_firstname”）.style[“border color”]=“红色”；
document.getElementById（“shipping_firstname”）.scrollIntoView（）；
document.getElementById（“sameAsBilling”）.checked=false；
返回；
}
jQuery（“#shipping_firstname”）.attr（“占位符”，”）；
showHideShipping（）；
}

[客户信息名称]
[CustomerInfo_lastname]
[客户信息公司]
[客户信息地址]
[客户信息地址2]
[客户信息城市]
[客户信息国家]
[客户信息电话]

尝试以下方法：

function checkEmpty() {
    var ok = true;
    $('.check-field').each(function(index, field) { 
        var $field = $(field);

        if (!$field.val()) { // Invalid field
            ok = false;
            $field
                .attr("placeholder", "ENTER DETAILS HERE")
                .css("border-color", "red");

            field.scrollIntoView();
        }
        else { // Valid field. Resets the style.
            $field
                .attr("placeholder", "")
                .css("border-color", "");
        }
    });

    $("#sameAsBilling").prop("checked", (ok ? "checked" : false));
    showHideShipping();
}

---

实际上我没有测试过，所以请原谅我的任何打字错误或语法错误。问题是，您需要将名为

check field

的类添加到每个要检查的元素中。无论是否有错误，代码段都将循环遍历所有这些内容并检查值、更改边框颜色和占位符。因此，所有无效元素将同时设置为无效，而不是逐个设置。

几个问题。我已经尝试过修复其中的一些问题

$（函数（）{
$（'sameAsBilling'）。在（'click'，checkEmpty）上；
/*
$（“[name^=shipping]”。在（“输入”，函数（）上）{
如果（$.trim（此.value）=“”）{
this.value=“占位符更有意义”；
}
}); 
*/  
});
函数checkEmpty（）{
var$shippingFN=$（“#shipping_firstname”）；
var shippingName=$shippingFN.val（）；
如果（shippingName==“”）{
$shippingFN.attr（“占位符”，“在此处输入详细信息”）；
$shippingFN.css（{“边框颜色”：“红色”}）；
$shippingFN[0]。scrollIntoView（）；
$（“#sameAsBilling”）.prop（“选中”，false）；
返回；
}
else$shippingFN.attr（“占位符”，“占位符”）；
//showHideShipping（）；
}

[客户信息名称]
[CustomerInfo_lastname]
[客户信息公司]
同样的
[客户信息地址]
[客户信息地址2]
[客户信息城市]
[客户信息国家]
[客户信息电话]

我创建了一个代码片段。请让它跑起来。还有，如果你有jQueryDisregard我说的话，为什么要使用

addEventListener

和

document.getElementById（'shipping_firstname'）

。我是个白痴，谢谢你的回答！我注意到的一件事是，当出现错误时，复选框不会自行重置error@JohnDoi2021我不确定复选框的行为，但我已经用更好的控制更新了问题。过来看。