Javascript 使用相同id隐藏多个div

我想使用相同的脚本函数隐藏多个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>

---

Id的

是唯一的

如果您使用

jQuery

，那么.您可以对所有div使用相同的

class

<代码>$（'.className'）.hide（）

如果您想要javascript中的解决方案

在某些浏览器中有

getElementsByClassName

，但它的支持不如getElementById广泛

---

否则，您可以对不同的div使用不同的ID，然后使用ID隐藏。ID应该是唯一的值。但是，要将div分组在一起，可以使用相同的类名。这里有一个例子

<div id="name" class="myClass">...</div>
<div id="address" class="myClass">...</div>
<div id="email" class="myOtherClass">...</div>

这将隐藏

姓名

和

地址

div，但不隐藏

电子邮件

div<代码>显示（）使它们再次可见

---

不过，根据您打算执行的操作，您可以将要隐藏的所有内容都放在一个div中，只需隐藏该div即可。

我们无法使用id来实现这一点，所以请尝试使用类。id应该是唯一的，因为每个人都不清楚你想做什么。您的问题标题意味着您正在编写无效的HTML（这是一个糟糕的想法，不要这样做），而您的HTML显示一个布局表（eugh），其中包含一组与任何输入无关的标签（请参见for属性），然后是一些不引用HTML中任何内容的JS！您的javascript正在使用ID

bookingDiv

，HTML代码中带有此ID的标记在哪里？您不能使用ID来循环元素，您必须使用

getElementsByClassName（）

或

getElementsByTagName

…iam使用第一行中的ID

<div id="name" class="myClass">...</div>
<div id="address" class="myClass">...</div>
<div id="email" class="myOtherClass">...</div>

$(".myClass").hide();