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>

JavaScript代码

   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 's是唯一的。

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

如果你想在javascript中使用解决方案

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

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

Answer 2

ID应该是唯一值。但是，要将div组合在一起，您可以使用相同的类名。这是一个例子。

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

jQuery允许您隐藏多个具有相同类名的元素，如此

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

会隐藏name和address div，但不会隐藏email div。 .show();让它们再次可见。

根据您打算做的事情，您可以将想要隐藏的所有内容放在div中，只需隐藏该div。

使用相同的ID隐藏多个div

2 个答案: