Wie bekomme ich mit JavaScript anstelle von GetElementById?
-
20-09-2019 - |
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>
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";