Вопросы Теги

Как к getElementByClass вместо GetElementById с JavaScript?

Я пытаюсь переключить видимость определенных элементов DIV на веб-сайте в зависимости от класса каждого DIV. Я использую основной отрывок JavaScript для переключения их. Проблема состоит в том, что сценарий только использует getElementById, как getElementByClass не поддерживается в JavaScript. И к сожалению я должен использовать класс и не идентификатор для именования ОТДЕЛЕНИЙ, потому что имена DIV динамично сгенерированы моей таблицей стилей XSLT с помощью имен определенной категории.

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

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

Вот HTML-код. Сами ОТДЕЛЕНИЯ отсутствуют, так как они сгенерированы на загрузке страницы с XML/XSLT.

Основной Вопрос: Как я заставляю ниже сценария Переключателя добираться, Элемент Классом вместо получают Элемент идентификатором?












Click here to toggle visibility of class 1 objects

Click here to toggle visibility of class 2 objects

88
задан ROMANIA_engineer 4 February 2018 в 00:23
поделиться

2 ответа

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

Предыдущий ответ

Вы захотите проверить 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>
74
ответ дан 24 November 2019 в 07:32
поделиться

Метод getElementsByClassName теперь изначально поддерживается самыми последними версиями Firefox, Safari, Chrome, IE и Opera, вы можете создать функцию для проверки наличия собственной реализации доступен, в противном случае используйте метод Дастина Диаса: 

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';
     }
  }
}
86
ответ дан 24 November 2019 в 07:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: