Скрытие нескольких div с использованием того же ID

Question

Я хочу скрыть несколько div, используя ту же функцию script.is это возможно? У меня есть один скрыть 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, то. Вы можете использовать одинаковые class для всех div. $('.className').hide();

Если вы хотите решение в JavaScript

Там же в некоторых браузерах getElementsByClassName, но это не так широко, как getElementById. SEE HERE

иначе вы можете использовать различные идентификаторы для diifferent дивы то скрыть, используя идентификаторы

Answer 2

ID должен быть уникальным значением. Однако для группировки divs вы можете использовать одно и то же имя класса. Вот пример.

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

jQuery позволяет скрыть несколько элементов, которые имеют такое же имя класса, как так

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

, который будет скрывать name и address дивы, но не email один. .show(); делает их видимыми снова.

В зависимости от того, что вы намереваетесь сделать, вы можете разместить все, что вы хотите скрыть внутри div, и просто скрыть этот div.