Wie bekomme ich mit JavaScript anstelle von GetElementById?

StackOverflow https://stackoverflow.com/questions/1933602

Frage

Ich versuche, die Sichtbarkeit bestimmter Div -Elemente auf einer Website abhängig von der Klasse jeder DIV umzuschalten. Ich verwende ein grundlegendes JavaScript -Snippet, um sie umzuschalten. Das Problem ist, dass das Skript nur verwendet getElementById, wie getElementByClass wird in JavaScript nicht unterstützt. Und leider muss ich eine Klasse und keine ID verwenden, um die Divs zu benennen, da die Div -Namen mit bestimmten Kategoriennamen dynamisch von meinem XSLT -Stylesheet generiert werden.

Ich weiß, dass bestimmte Browser jetzt unterstützen getElementByClass, Aber da Internet Explorer nicht, möchte ich diesen Weg nicht gehen.

Ich habe Skripte gefunden, die Funktionen verwenden, um Elemente nach Klasse zu erhalten (z. B. #8 auf dieser Seite: http://www.dustindiaz.com/top-ten-javascript/), aber ich kann nicht herausfinden, wie man sie mit meinem Umkippungsskript integriert.

Hier ist der HTML -Code. Die Divs selbst fehlen, da sie mit XML/XSLT auf der Seite geladen werden.

Hauptfrage: Wie erhalte ich das folgende Umschaltskript, um Element per Klasse zu erhalten, anstatt Element per ID zu erhalten?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
War es hilfreich?

Lösung

Moderne Browser haben Unterstützung für document.getElementsByClassName. Sie können den vollen Zusammenbruch sehen, dessen Anbieter diese Funktionalität liefern kann ich benutzen. Wenn Sie die Unterstützung in ältere Browser ausdehnen möchten, sollten Sie eine Art Selektor -Engine in Betracht ziehen, die in JQuery oder einer Polyfill enthalten sind.

Ältere Antwort

Sie möchten nachsehen JQuery, was die folgende zulässt:

$(".classname").hide(); // hides everything with class 'classname'

Google bietet ein gehostetes JQuery-Quellfils-Datei an, sodass Sie es in Momenten verweisen und aufstreben können. Geben Sie Folgendes in Ihre Seite ein:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Andere Tipps

Das getElementsByClassName Die Methode wird nun nativ von den neuesten Versionen von Firefox, Safari, Chrome, IE und Opera unterstützt.

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Verwendungszweck:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Durch die Verwendung von GetElementsByClassName wird eine Reihe mehrerer Klassen zurückgegeben. Da der gleiche Klassenname in mehr als einer Instanz auf derselben HTML -Seite verwendet werden kann. Wir verwenden eine Array -Element -ID, um die Klasse zu zielen, die wir in meinem Fall benötigen. In meinem Fall ist es die erste Instanz des angegebenen Klassennamens. Ich habe also [0

Hinzufügen zu Antwort von CMS, Dies ist ein allgemeinerer Ansatz von toggle_visibility Ich habe mich gerade selbst benutzt:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Meine Lösung:

Zuerst erstellen " u003Cstyle>" tags with an ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Dann erstelle ich eine Funktion in JavaScript wie folgt:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Arbeitete wie ein Zauber für mich.

Verwenden Sie es, um in JavaScript auf die Klasse zuzugreifen.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

IDS bei der Klassenerklärung anhängen

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top