2010-08-24 21 views
5

Ich habe ein HTML-Element, das ich aus Sicht ausblenden möchte, aber ich kann nicht auf dieses Element durch eine ID zugreifen, da es keine ID hat und ich kann keine ID zuweisen. Es ist jedoch eine Klasse zugewiesen. Gibt es eine Möglichkeit, dieses Element vor der Ansicht zu verbergen, ohne es zu haben?Javascript: Elemente nach Klassennamen ausblenden

+0

möglich Duplikat von [Wie mit Javscript statt getElementByID getElementByClass?] (Http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javscript) – recursive

Antwort

5

Es gibt getElementsByClassName in einigen Browsern, aber es ist nicht so weit unterstützt wie getElementById. Beachten Sie, dass es anstelle eines einzelnen Elements ein Array von Elementen liefert, da mehrere Elemente dieselbe Klasse haben können.

Wenn Sie eine ID zu einem Elternteil zuweisen können Sie könnten in der Lage sein, es auf andere Weise zuzugreifen:

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

Okay ... Ich kann über eine Eltern-ID darauf zugreifen. Wie würde ich es ausblenden, nachdem ich darauf zugegriffen habe? – lewisqic

+0

vergesst, ich habe es herausgefunden ... var elements = document.getElementById ('home_poll'). GetElementsByTagName ('a'); \t \t Elemente [2] .style.display = "none"; – lewisqic

2

Die folgende HTML-Datei enthält Code zu wechseln, zu verbergen, anzeigen div von Klassen- und id. Durch die Verwendung der Klasse ist es möglich, eine Menge (Gruppe) von Unterteilungen zu verbergen.

<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> 
Verwandte Themen