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

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

Answer 2

3

Dlaczego od początku nie używałem jQuery? (Odpowiedź CMS była tą, o której myślałem, że szukałem, ale nie mogłem go uruchomić) Dałem każdemu linkowi identyfikator, a dzięki jQuery mogę zdefiniować, które klasy mają się wyświetlać, a które są ukrywane po kliknięciu na konkretny link. ŚWIETNY! To rozwiązanie wydaje się zbyt piękne, aby mogło być prawdziwe. jQuery wydaje się zbyt piękne, aby mogło być prawdziwe. Jakie są wady korzystania z jQuery? Jako nowicjusz, dlaczego miałbym używać JavaScript zamiast jQuery?

Alan

Answer 3

80

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>

Sampson
źródło

1

Chociaż dobrze, hostowany przez Google jQuery jest przydatny tylko do najprostszych rzeczy, ze względu na bezpieczeństwo skryptów między witrynami zaimplementowane w większości nowoczesnych przeglądarek.

Paulo Santos,

2

Możesz także pobrać plik źródłowy z jQuery.com i odwołać się do niego lokalnie.

Sampson

21

@Paulo: Cross-site scripting nie ma zastosowania do <script>tagów. Usługa jQuery hostowana przez Google została zaprojektowana specjalnie dla witryn produkcyjnych (jako CDN). Jeśli Twoja witryna to https, po prostu upewnij się, że używasz wersji https, aby uniknąć ostrzeżenia o mieszanej zawartości.

Chetan S,

3

W rzeczywistości <script>wstrzykiwanie tagów jest podstawą żądań JSONP między witrynami.

Chetan S,

2

Paulo, zdajesz sobie sprawę, że po dołączeniu jQuery do tagu <script> nie ma żadnych ograniczeń między witrynami?

Dark Falcon

Answer 4

1

Chociaż dobrze, hostowany przez Google jQuery jest przydatny tylko do najprostszych rzeczy, ze względu na bezpieczeństwo skryptów między witrynami zaimplementowane w większości nowoczesnych przeglądarek.

Paulo Santos,

Answer 5

2

Możesz także pobrać plik źródłowy z jQuery.com i odwołać się do niego lokalnie.

Sampson

Answer 6

21

@Paulo: Cross-site scripting nie ma zastosowania do <script>tagów. Usługa jQuery hostowana przez Google została zaprojektowana specjalnie dla witryn produkcyjnych (jako CDN). Jeśli Twoja witryna to https, po prostu upewnij się, że używasz wersji https, aby uniknąć ostrzeżenia o mieszanej zawartości.

Chetan S,

Answer 7

3

W rzeczywistości <script>wstrzykiwanie tagów jest podstawą żądań JSONP między witrynami.

Chetan S,

Answer 8

2

Paulo, zdajesz sobie sprawę, że po dołączeniu jQuery do tagu <script> nie ma żadnych ograniczeń między witrynami?

Dark Falcon

Answer 9

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

Answer 10

2

Dlaczego używasz tej funkcji wewnętrznej zamiast zwykłego kodu?

Tomáš Zato - Przywróć Monikę

Answer 11

-1 na przykład użycie przy założeniu, że wszystkie elementy na ekranie mają wyświetlanie blokowe. W toggle_visibility, jeśli e jest <span>, to powinno być „inline”, a nie „block”. O wiele bardziej wytrzymałe rozwiązaniem jest zdefiniowanie klasy CSS: .invisible {display: none ważne!} I użyć JavaScript jQuery (lub), aby przypisać i cofnąć że klasa z elementów

John Meyer

Answer 12

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]

Answer 13

3

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

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

Manvendra Priyadarshi
źródło

Answer 14

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

Answer 15

1

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.

tylorion
źródło

1

<br>

Podziały wierszy

Answer 16

1

<br>

Podziały wierszy

Answer 17

-1

Dołącz identyfikatory do deklaracji klasy

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

Reltpid
źródło

Jak uzyskać GetElementByClass zamiast GetElementById z JavaScript?

Odpowiedzi:

Starsza odpowiedź