javascript - 使用相同的 id 隐藏多个 div

Question

我想使用相同的脚本函数隐藏多个 div。这可能吗？我隐藏了一个 div...检查我的代码

html代码:

<div id="bookingDiv">
   <table>
      <tr>
         <td>
            <table>
               <tr>
                  <td class="labelTd">
                     <label>Employee Name
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue" name="txtEmployeeName"  id="txtEmployeeName" readonly tabindex="6" value="<%=strEmployeeName%>" size="11" maxlength="11" />
                  </td>
               </tr>
               <tr>
                  <td class="labelTd">
                     <label> Travel Date From
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue"  id="txtDateFrom"   readonly name="txtDateFrom" size="11" maxlength="11" tabindex="4"    value="<%=strDateFrom%>"   style=" width : 136px;" />
                  </td>
               </tr>
               <tr>
                  <td class="labelTd">
                     <label> Purpose of Visit 
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue"  name="txtPurposeOfVisit"  value="<%=strPurpose%>" class="textArea-Medium" tabindex="5" style=" width : 144px;"></input>
                  </td>
                  <td></td>
               </tr>
            </table>
         </td>
         <td>
            <table>
               <tr>
                  <td class="labelTd">
                     <label>Designation
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue" name="txtDesignation"  readonly id="txtDesignation" tabindex="8" value="<%=strDesignation%>" size="11"  maxlength="11" />
                  </td>
               </tr>
               <tr>
                  <td class="labelTd">
                     <label>Employee Grade
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue" name="txtEmployeeGrade"  readonly id="txtEmployeeGrade" tabindex="7" value="<%=strEmployeeGrade%>" size="11" maxlength="11" />
                  </td>
               </tr>
               <tr>
                  <td class="labelTd">
                     <label>Advance&nbsp;Amount Requested
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue" name="txtAdvanceAmountReq"  readonly id="txtAdvanceAmountReq" tabindex="10" value="<%=approvedAmt%>" size="8"  maxlength="11" />
                  </td>
               </tr>
               <tr>
                  <td class="labelTd">
                     <label>Additional&nbsp;Amount Requested
                     </label>
                  </td>
                  <td class="fieldTd">
                     <input type="text" class="txt-med2" style="color: blue" name="txtAdditionalAmountReq"  readonly id="txtAdditionalAmountReq" tabindex="11" value="<%=strAdditionalAmountReq%>" size="8" maxlength="11" />
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</div>

JS代码:

function showDiv() {
    var tmp1 = document.getElementById("txtTravelId");
    if (tmp1.value == "") {
        document.getElementById("bookingDiv").style.display = 'none';
    } else {
        document.getElementById("bookingDiv").style.display = 'block';
    }
}

Answer 1

Id 的是唯一的。

如果您使用jQuery，那么。您可以对所有div 使用相同的class。 $('.className').hide();

如果你想用 javascript 解决

在某些浏览器中有 getElementsByClassName，但它不像 getElementById 那样得到广泛支持。 SEE HERE

否则你可以对不同的 div 使用不同的 id，然后使用 id 隐藏