Я пытаюсь переключить видимость определенных элементов 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 для получения элемента по классу вместо получения элемента по идентификатору?
<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>