it-swarm.com.de

Wie man getElementByClass anstelle von GetElementById mit JavaScript erhält?

Ich versuche, die Sichtbarkeit bestimmter DIV-Elemente auf einer Website in Abhängigkeit von der Klasse der jeweiligen DIV zu ändern. Ich verwende ein einfaches JavaScript-Snippet, um sie umzuschalten. Das Problem ist, dass das Skript nur getElementById verwendet, da getElementByClass in JavaScript nicht unterstützt wird. Und leider muss ich class und nicht id verwenden, um die DIVs zu benennen, da die DIV-Namen von meinem XSLT-Stylesheet unter Verwendung bestimmter Kategorienamen dynamisch generiert werden.

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

Ich habe Skripte gefunden, die Funktionen verwenden, um Elemente nach Klassen zu erhalten (z. B. Nr. 8 auf dieser Seite: http://www.dustindiaz.com/top-ten-javascript/ ), aber ich kann nicht herausfinden wie kann ich sie mit meinem Toggle-Skript integrieren?.

Hier ist der HTML-Code. Die DIVs selbst fehlen, da sie beim Laden der Seite mit XML/XSLT generiert werden.

Hauptfrage: Wie bekomme ich das unten stehende Toggle-Skript, um Element nach Klasse statt Element nach 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>
84
Alan

Moderne Browser unterstützen document.getElementsByClassName. Die vollständige Aufschlüsselung der Anbieter, die diese Funktionalität bereitstellen, finden Sie unter caniuse . Wenn Sie die Unterstützung auf ältere Browser ausweiten möchten, sollten Sie ein Auswahlmodul wie jQuery oder ein Polyfill verwenden.

Ältere Antwort

Du solltest in jQuery einchecken, was Folgendes erlaubt:

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

Google bietet eine gehostete jQuery-Quelldatei, damit Sie darauf verweisen können und in Kürze betriebsbereit sind. Fügen 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>
72
Sampson

Die getElementsByClassName-Methode wird jetzt von den neuesten Versionen von Firefox, Safari, Chrome, IE und Opera nativ unterstützt. Sie können eine Funktion erstellen, um zu überprüfen, ob eine native Implementierung verfügbar ist. Andernfalls verwenden Sie die Dustin Diaz-Methode:

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';
     }
  }
}
86
CMS
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Bei Verwendung von getElementsByClassName wird ein Array mit mehreren Klassen zurückgegeben. Weil derselbe Klassenname in mehr als einer Instanz innerhalb derselben HTML-Seite verwendet werden kann. Wir verwenden die Array-Element-ID, um auf die Klasse zu zielen, die wir benötigen. In meinem Fall ist es die erste Instanz des angegebenen Klassennamens.So habe ich verwendet [0]

4
Vishwa

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

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

Meine Lösung:

Erstellen Sie zuerst "<style>" - Tags mit einer 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.

2
thylorion

zusätzlich zu CMS's Antwort ist dies ein generischerer Ansatz von toggle_visibility, den ich gerade selbst verwendet habe:

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';
       }
     }
  }
}
2
cregox

Anhängen von IDs bei der Klassendeklaration

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
0
Reltpid