Estou tentando alternar a visibilidade de certos elementos DIV em um site, dependendo da classe de cada DIV. Estou usando um snippet de JavaScript básico para alterná-los. O problema é que o script só usa getElementById
, pois getElementByClass
não é compatível com JavaScript. E, infelizmente, tenho que usar class e não id para nomear os DIVs porque os nomes dos DIVs são gerados dinamicamente por minha folha de estilo XSLT usando certos nomes de categorias.
Eu sei que alguns navegadores agora oferecem suporte getElementByClass
, mas como o Internet Explorer não, não quero seguir esse caminho.
Encontrei scripts usando funções para obter elementos por classe (como o nº 8 nesta página: http://www.dustindiaz.com/top-ten-javascript/ ), mas não consigo descobrir como integrá-los com o meu script de alternância.
Aqui está o código HTML. Os próprios DIVs estão ausentes, pois são gerados no carregamento da página com XML / XSLT.
Pergunta principal: Como faço para obter o script de alternância abaixo para obter Elemento por classe em vez de obter Elemento por 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>