javascript - 使用 Javascript 将相同的类添加到多个 Div

Question

我正在使用 Bootstrap，并且我有一个具有 2 个状态(输入和确认)的表单。

当表单处于“输入”状态时 <div>应该有一个类 form-group

条目 HTML 如下所示

<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
     <div id="FromDiv" class="col-sm-6 col-md-4">[!From_DropDownList]</div>
     <div id="FromErrorDiv" class="col-sm-offset-5 col-sm-7">[!From_DropDownList_Error]</div>
</div>
<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
     <div id="ToDiv" class="col-sm-6 col-md-4">[!To_DropDownList]</div>
     <div id="ToErrorDiv" class="col-sm-offset-5 col-sm-7">[!To_DropDownList_Error]</div>
</div>
<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
     <div id="AmountDiv" class="col-sm-6 col-md-4">[!Amount_TextBox]</div>
     <div id="AmountErrorDiv" class="col-sm-offset-5 col-sm-7">[!Amount_Error]</div>
</div>

当表单处于“确认”状态时 <div>应该有一个类 row

确认下面显示的 HTML

<div class="row">
     <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
     <div id="FromDiv" class="col-sm-6 col-md-4">[!From_DropDownList]</div>
     <div id="FromErrorDiv" class="col-sm-offset-5 col-sm-7">[!From_DropDownList_Error]</div>
</div>
<div class="row">
     <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
     <div id="ToDiv" class="col-sm-6 col-md-4">[!To_DropDownList]</div>
     <div id="ToErrorDiv" class="col-sm-offset-5 col-sm-7">[!To_DropDownList_Error]</div>
</div>
<div class="row">
     <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
     <div id="AmountDiv" class="col-sm-6 col-md-4">[!Amount_TextBox]</div>
     <div id="AmountErrorDiv" class="col-sm-offset-5 col-sm-7">[!Amount_Error]</div>
</div>

如果我添加 id到div并在我的 JavaScript 中处理它，我只能让它添加 class到第一个div而不是其余的，尽管如果我 F12 网页，所有行都有相同的 id

最好的方法是什么，这样我就不必为每个 div 添加 JavaScript 代码行id

是否可以在 JavaScript 中添加某种功能来减少代码量？

下面是我为 HTML 设计的内容

<div id="RowDivClass">
      <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
      <div id="FromDiv" class="col-sm-6 col-md-4">[!From_DropDownList]</div>
      <div id="FromErrorDiv" class="col-sm-offset-5 col-sm-7">[!From_DropDownList_Error]</div>
 </div>
 <div id="RowDivClass">
      <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
      <div id="ToDiv" class="col-sm-6 col-md-4">[!To_DropDownList]</div>
      <div id="ToErrorDiv" class="col-sm-offset-5 col-sm-7">[!To_DropDownList_Error]</div>
 </div>
 <div id="RowDivClass">
      <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
      <div id="AmountDiv" class="col-sm-6 col-md-4">[!Amount_TextBox]</div>
      <div id="AmountErrorDiv" class="col-sm-offset-5 col-sm-7">[!Amount_Error]</div>
 </div>

我的 JavaScript onclick我的“创建”按钮是

function RegCashMoveCreate(txt) {
     document.getElementById('RowDivClass').className = "form-group";
};

我的“确认”页面状态的 JavaScript 是

<% if (state == "Confirm") { %>
     document.getElementById('RowDivClass').className = "row";
<% } %>

基本上我想添加相同的 class至多个div取决于页面状态

Answer 1

使用类而不是 ID。不应将一个 ID 分配给多个元素。这就是为什么它只查找和修改第一个找到的元素。

条目 HTML

<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">From</label>
     <div id="FromDiv" class="col-sm-6 col-md-4">[!From_DropDownList]</div>
     <div id="FromErrorDiv" class="col-sm-offset-5 col-sm-7">[!From_DropDownList_Error]</div>
</div>
<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">To</label>
     <div id="ToDiv" class="col-sm-6 col-md-4">[!To_DropDownList]</div>
     <div id="ToErrorDiv" class="col-sm-offset-5 col-sm-7">[!To_DropDownList_Error]</div>
</div>
<div class="form-group">
     <label class="col-sm-offset-3 col-sm-2 control-label">Amount</label>
     <div id="AmountDiv" class="col-sm-6 col-md-4">[!Amount_TextBox]</div>
     <div id="AmountErrorDiv" class="col-sm-offset-5 col-sm-7">[!Amount_Error]</div>
</div>

Javascript 请注意，由于存在多个具有相同类名的元素，因此您需要循环遍历并将其应用到每个元素:

function RegCashMoveCreate(txt) {
    var elements = document.getElementsByClassName("form-group");
    for(var i = 0; i < elements.length; i++)
    {
        elements[i].className = "row";
    }
};

有关 getElementsByClassName() 的更多信息可在此处找到:W3Schools getElementsByClassName()