Jak uzyskać GetElementByClass zamiast GetElementById z JavaScript?

Question 1

Próbuję przełączać widoczność niektórych elementów DIV na stronie internetowej w zależności od klasy każdego DIV. Używam podstawowego fragmentu kodu JavaScript, aby je przełączać. Problem polega na tym, że skrypt używa tylko getElementById, co getElementByClassnie jest obsługiwane w JavaScript. I niestety muszę użyć class, a nie id, aby nazwać DIV, ponieważ nazwy DIV są dynamicznie generowane przez mój arkusz stylów XSLT przy użyciu pewnych nazw kategorii.

Wiem, że niektóre przeglądarki obsługują teraz getElementByClass, ale ponieważ Internet Explorer nie działa, nie chcę iść tą drogą.

Znalazłem skrypty używające funkcji do pobierania elementów według klas (takich jak # 8 na tej stronie: http://www.dustindiaz.com/top-ten-javascript/ ), ale nie mogę dowiedzieć się, jak je zintegrować z moim skryptem przełączania.

Oto kod HTML. Brakuje samych DIV, ponieważ są one generowane podczas ładowania strony za pomocą XML / XSLT.

Główne pytanie: Jak uzyskać poniższy skrypt Toggle, aby uzyskać element według klasy zamiast pobierania elementu według identyfikatora?

<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>

Question 2

Nowoczesne przeglądarki obsługują document.getElementsByClassName. Pełne zestawienie dostawców oferujących tę funkcję można znaleźć w caniuse . Jeśli chcesz rozszerzyć obsługę starszych przeglądarek, możesz rozważyć silnik selektora, taki jak w jQuery lub polyfill.

Starsza odpowiedź

Będziesz chciał sprawdzić w jQuery , co pozwoli na:

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

Google oferuje hostowany plik źródłowy jQuery, dzięki czemu można się do niego odwołać i natychmiast zacząć działać. Uwzględnij na swojej stronie następujące informacje:

<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>

Question 3

Ta getElementsByClassNamemetoda jest teraz natywnie obsługiwana przez najnowsze wersje przeglądarek Firefox, Safari, Chrome, IE i Opera, możesz utworzyć funkcję sprawdzającą, czy dostępna jest natywna implementacja, w przeciwnym razie użyj metody Dustina Diaz:

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);
  }
}

Stosowanie:

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

Question 4

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

Automatycznie, używając getElementsByClassName, zwraca tablicę wielu klas. Ponieważ ta sama nazwa klasy może być używana w więcej niż jednym wystąpieniu na tej samej stronie HTML. Używamy id elementu tablicy, aby wskazać klasę, której potrzebujemy, w moim przypadku jest to pierwsza instancja danej nazwy klasy. Więc użyłem [0]

Question 5

Użyj go, aby uzyskać dostęp do klasy w JavaScript.

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

Question 6

dodając do odpowiedzi CMS , jest to bardziej ogólne podejście, toggle_visibilityktórego właśnie użyłem:

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

Question 7

Moje rozwiązanie:

Najpierw utwórz tagi „<style>” z identyfikatorem.

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

Następnie tworzę funkcję w JavaScript w następujący sposób:

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

U mnie zadziałało jak urok.

Question 8

Dołącz identyfikatory do deklaracji klasy

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