Wie bekomme ich ElementByClass statt GetElementById mit JavaScript?

Lesezeit: 6 Minuten

Wie bekomme ich ElementByClass statt GetElementById mit JavaScript
Alan

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 getElementByIdals getElementByClass wird in JavaScript nicht unterstützt. Und leider muss ich class und nicht id verwenden, um die DIVs zu benennen, da die DIV-Namen dynamisch von meinem XSLT-Stylesheet mit bestimmten Kategorienamen generiert werden.

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

Ich habe Skripte gefunden, die Funktionen verwenden, um Elemente nach Klasse abzurufen (wie #8 auf dieser Seite: http://www.dustindiaz.com/top-ten-javascript/), aber ich kann nicht herausfinden, wie ich sie in mein Toggle-Skript integrieren kann.

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 folgende Toggle-Skript, um Element nach Klasse zu erhalten, anstatt 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>

  • Warum habe ich nicht schon immer jQuery verwendet? Ich habe den Vorschlag von @Jonathan Sampson übernommen, jQuery zu verwenden, und es funktioniert! (Die Antwort von CMS war die, nach der ich gesucht hatte, aber ich konnte sie nicht zum Laufen bringen.) Ich habe jedem Link eine ID gegeben, und mit jQuery kann ich definieren, welche Klassen angezeigt und welche Klassen ausgeblendet werden, wenn Sie auf a klicken besondere Verbindung. GROSSARTIG! Diese Lösung scheint zu schön, um wahr zu sein. jQuery scheint zu schön, um wahr zu sein. Welche Nachteile hat die Verwendung von jQuery? Warum sollte ich als Anfänger Javascript anstelle von jQuery verwenden?

    – Alan

    19. Dezember 2009 um 20:30 Uhr

1646247306 310 Wie bekomme ich ElementByClass statt GetElementById mit JavaScript
Christian C. Salvado

Die getElementsByClassName -Methode jetzt nativ von den neuesten Versionen von Firefox, Safari, Chrome, IE und Opera unterstützt wird, könnten Sie eine Funktion erstellen, um zu prü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';
     }
  }
}

  • Warum verwenden Sie diese innere Funktion anstelle von einfachem Code?

    – Tomáš Zato – Wiedereinsetzung von Monica

    25. Dezember 2013 um 13:29 Uhr

  • -1 zum Beispiel Verwendung unter der Annahme, dass alle Elemente auf dem Bildschirm eine Blockanzeige haben. Wenn e in toggle_visibility ein ist, sollte es ‘inline’ und nicht ‘block’ sein. Eine viel robustere Lösung besteht darin, eine CSS-Klasse zu definieren: .invisible { display: none !important } und JavaScript (oder jQuery) zu verwenden, um diese Klasse Elementen zuzuweisen und die Zuweisung aufzuheben

    – John Meyer

    24. Juli 2015 um 12:36 Uhr

Wie bekomme ich ElementByClass statt GetElementById mit JavaScript
Samson

Moderne Browser unterstützen z document.getElementsByClassName. Die vollständige Aufschlüsselung der Anbieter, die diese Funktionalität anbieten, finden Sie unter kann ich benutzen. Wenn Sie die Unterstützung auf ältere Browser ausdehnen möchten, sollten Sie eine Selektor-Engine wie die in jQuery oder ein Polyfill in Betracht ziehen.

Ältere Antwort

Sie wollen einchecken jQuerywas Folgendes ermöglicht:

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

Google bietet eine gehostete jQuery-Quelldatei an, sodass Sie darauf verweisen und in wenigen Augenblicken einsatzbereit sein können. 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>

  • Obwohl gut, ist das von Google gehostete jQuery aufgrund der von den meisten modernen Browsern implementierten Cross-Site-Scripting-Sicherheit nur für die einfachsten Dinge nützlich.

    – Paul Santos

    19. Dezember 2009 um 17:45 Uhr

  • Sie können die Quelldatei auch von jQuery.com herunterladen und lokal darauf verweisen.

    – Samson

    19. Dezember 2009 um 17:46 Uhr

  • @Paulo: Cross-Site-Scripting ist nicht anwendbar <script> Stichworte. Von Google gehostetes jQuery wurde speziell für Produktionswebsites (als CDN) entwickelt. Wenn Ihre Website https ist, stellen Sie einfach sicher, dass Sie die https-Version verwenden, um eine Warnung vor gemischten Inhalten zu vermeiden.

    – Chetan S

    19. Dezember 2009 um 20:39 Uhr

  • In der Tat, <script> Tag-Injection ist die Grundlage für Cross-Site-JSONP-Anfragen.

    – Chetan S

    19. Dezember 2009 um 20:42 Uhr

  • Paulo, dir ist schon klar, dass es überhaupt keine Cross-Site-Einschränkungen mehr gibt, wenn du jQuery mit dem

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy