2010-08-24 17 views
5

Mam element HTML, który chcę ukryć przed widokiem, ale nie mogę uzyskać dostępu do tego elementu przez identyfikator, ponieważ nie ma on identyfikatora i nie mogę przypisać do niego identyfikatora. Ma jednak przypisaną do niego klasę. Czy istnieje jakiś sposób na ukrycie tego elementu przed wyświetleniem bez jego id?JavaScript: Ukryj elementy według nazwy klasy

+0

możliwe duplikat [Jak getElementByClass zamiast getElementById z javscript?] (Http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javscript) – recursive

Odpowiedz

5

W niektórych przeglądarkach jest getElementsByClassName, ale nie jest tak szeroko obsługiwany, jak getElementById. Zauważ, że daje to tablicę elementów, a nie tylko jeden element, ponieważ kilka elementów może mieć tę samą klasę.

Jeśli można przypisać identyfikator rodzica może być w stanie uzyskać do niego dostęp w inny sposób:

document.getElementById('parent').getElementsByTagName('div')[3] // or whatever 
+0

okej ... Mogę uzyskać do niego dostęp za pośrednictwem identyfikatora nadrzędnego. Jak mam to ukryć przed zobaczeniem po tym, jak do niego dostęp? – lewisqic

+0

nevermind, wymyśliłem to ... var elements = document.getElementById ('home_poll'). GetElementsByTagName ("a"); \t \t elementy [2] .style.display = "none"; – lewisqic

2

Następujący plik html zawiera kod, aby przełączyć, ukrywać, pokazywać div przez klasy i id. Za pomocą klasy można ukryć zestaw (grupę) podziałów.

<head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    /*function to toggle visibility of class*/ 
      function toggle_visibility(classname) { $("."+classname).toggle(); } 
    /*function to hide class*/ 
      function hide_visibility(classname) { $("."+classname).hide(); } 
    /*function to show class*/ 
      function show_visibility(classname) { $("."+classname).show(); } 
    /*function to hide individual div by id*/ 
      function hide_visibility(classname) { $("#"+classname).hide(); } 
    /*function to show individual div by id*/  
      function show_visibility(classname) { $("#"+classname).show(); } 
    </script> 

</head> 

<body> 

    <button onclick="toggle_visibility('class1');">Toggle visibility of class 1</button><br/> 
    <button onclick="hide_visibility('class1');">Hide class 1</button><br/> 
    <button onclick="show_visibility('class1');">Show class 1</button><br/> 
    <button onclick="show_visibility('heading1');">Show heading 1</button><br/> 
    <button onclick="hide_visibility('heading1');">Hide heading 1</button><br/> 

    <div class="class1" id="heading1"><h1>Heading 1</h1></div> 
    <div class="class1"><h2>Heading 2</h2></div> 
    <div class="class1"><h3>Heading 3</h3></div> 
    <div class="class1"><h4>Heading 4</h4></div> 
    <div class="class1"><h5>Heading 5</h5></div> 
    <div class="class1"><h6>Heading 6</h6></div> 

</body> 
Powiązane problemy