Как получитьElementByClass вместо GetElementById с JavaScript? - PullRequest
Новая
       41

Как получитьElementByClass вместо GetElementById с JavaScript?

86 голосов
/ 19 декабря 2009

Я пытаюсь переключать видимость определенных элементов DIV на сайте в зависимости от класса каждого DIV. Я использую базовый фрагмент JavaScript для их переключения. Проблема в том, что скрипт использует только getElementById, так как getElementByClass не поддерживается в JavaScript. И, к сожалению, мне приходится использовать class, а не id для именования DIV, потому что имена DIV динамически генерируются моей таблицей стилей XSLT с использованием определенных имен категорий.

Я знаю, что некоторые браузеры теперь поддерживают getElementByClass, но поскольку Internet Explorer не поддерживает, я не хочу идти по этому пути.

Я нашел скрипты, использующие функции для получения элементов по классам (например, # 8 на этой странице: http://www.dustindiaz.com/top-ten-javascript/),, но я не могу понять, как интегрировать их с моим скриптом переключения.

Вот код HTML. Сами DIV отсутствуют, так как они генерируются при загрузке страницы с помощью XML / XSLT.

Основной вопрос: как получить приведенный ниже скрипт Toggle для получения Element by Class вместо получения Element by ID? 

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

Ответы [ 7 ]

86 голосов
/ 19 декабря 2009

Метод getElementsByClassName теперь изначально поддерживается в последних версиях Firefox, Safari, Chrome, IE и Opera. Вы можете создать функцию для проверки доступности собственной реализации, в противном случае используйте метод Dustin 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);
  }
}

Использование: 

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';
     }
  }
}
73 голосов
/ 19 декабря 2009

Современные браузеры поддерживают document.getElementsByClassName. Вы можете увидеть полный список поставщиков, предоставляющих эту функцию, по адресу caniuse . Если вы хотите расширить поддержку старых браузеров, вы можете рассмотреть механизм выбора, подобный тому, который есть в jQuery или polyfill.

Старый ответ

Вы захотите проверить jQuery , что позволит следующее: 

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

Google предлагает размещенный исходный файл jQuery, так что вы можете сослаться на него и сразу приступить к работе. Включите следующее на своей странице: 

<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>
4 голосов
/ 23 ноября 2017 
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Acyually, используя getElementsByClassName, он возвращает массив нескольких классов. Потому что одно и то же имя класса может использоваться в нескольких экземплярах на одной и той же HTML-странице. Мы используем идентификатор элемента массива для целевого класса, который нам нужен, в моем случае это первый экземпляр заданного имени класса. Итак, я использовал [0]

2 голосов
/ 28 июня 2016

Используйте его для доступа к классу в Javascript. 

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
2 голосов
/ 17 апреля 2013

Мое решение:

Сначала создайте теги "

2 голосов
/ 16 сентября 2010

добавление к ответу CMS , это более общий подход toggle_visibility Я только что использовал себя: 

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';
       }
     }
  }
}
0 голосов
/ 16 октября 2018

Добавление идентификаторов при объявлении класса 

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