Ich versuche, die Sichtbarkeit bestimmter DIV-Elemente auf einer Website abhängig von der Klasse jedes DIV umzuschalten. Ich verwende ein einfaches JavaScript-Snippet, um sie umzuschalten. Das Problem ist, dass das Skript nur verwendet getElementById
, da getElementByClass
es in JavaScript nicht unterstützt wird. Und leider muss ich Klasse 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 unterstützen getElementByClass
, 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 abzurufen (z. B. # 8 auf dieser Seite: http://www.dustindiaz.com/top-ten-javascript/ ), aber ich kann nicht herausfinden, wie sie integriert werden können mit mit meinem Umschalt-Skript.
Hier ist der HTML-Code. Die DIVs selbst fehlen, da sie beim Laden der Seite mit XML / XSLT generiert werden.
Hauptfrage: Wie erhalte ich das folgende Umschalt-Skript, um Element nach Klasse abzurufen, anstatt Element nach ID abzurufen?
<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>
Antworten:
Moderne Browser unterstützen
document.getElementsByClassName
. Sie können die vollständige Aufschlüsselung der Anbieter sehen, die diese Funktionalität bei caniuse bereitstellen . Wenn Sie die Unterstützung auf ältere Browser ausweiten möchten, sollten Sie eine Selector-Engine wie die in jQuery oder einer Polyfill in Betracht ziehen.Ältere Antwort
Sie sollten in jQuery einchecken , was Folgendes ermöglicht:
Google bietet eine gehostete jQuery-Quelldatei an, damit Sie darauf verweisen und in wenigen Augenblicken einsatzbereit sein können. Fügen Sie Folgendes in Ihre Seite ein:
quelle
<script>
Tags. Von Google gehostete jQuery wurde speziell für Produktionswebsites (als CDN) entwickelt. Wenn Ihre Site https ist, stellen Sie einfach sicher, dass Sie die https-Version verwenden, um Warnungen vor gemischten Inhalten zu vermeiden.<script>
Tag-Injection die Grundlage für standortübergreifende JSONP-Anforderungen.Die
getElementsByClassName
Methode wird jetzt nativ von den neuesten Versionen von Firefox, Safari, Chrome, IE und Opera 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:Verwendung:
quelle
Durch die 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 abzuzielen, die wir benötigen. In meinem Fall handelt es sich um die erste Instanz des angegebenen Klassennamens. Also habe ich [0] verwendet.
quelle
Verwenden Sie diese Option, um auf die Klasse in Javascript zuzugreifen.
quelle
Neben der Antwort von CMS ist dies ein allgemeinerer Ansatz, den
toggle_visibility
ich gerade selbst verwendet habe:quelle
Meine Lösung:
Erstellen Sie zuerst "<style>" - Tags mit einer ID.
Dann erstelle ich eine Funktion in JavaScript wie folgt:
Arbeitete wie ein Zauber für mich.
quelle
<br>
) sind innerhalb eines Style-Tags nutzlos / ungültigFügen Sie der Klassendeklaration IDs hinzu
quelle