Show-hide content with DOM V.2

Ontem, ao redigir o artigo sombra em imagem com DOM e CSS, percebi que o script de mostrar-esconder conteúdo poderia receber uma melhoria. Ao invés de procurar cada classe CSS que se referisse à outra língua (no meu caso o inglês), por que não utilizar o atributo lang inserido dentro das referidas tags?? Pois é, essa foi a sacada!

Novo código

1. var arrEls = new Array("h1","h2","h3","h4","h5","h6", "p","span","ul","ol","blockquote")
2.  
3. function getTextNodeByLangName(tag,eventNode) {
4.  
5. var els = document.getElementsByTagName(tag);
6.  
7. var idLink = 'showHideTextNode';
8. var messageShow = '[+] Show english content’;
9. var messageHide = '[-] Hide english content’;
10.  
11. var linkTextNode = document.getElementById(idLink);
12.  
13. for (i = 0; i < els.length; i++) {
14. var lang = els[i].getAttribute(”lang”);
15. if (lang == 'en') {
16. if (eventNode == 'hide') {
17. linkTextNode.innerHTML = messageShow;
18. linkTextNode.className = "link-show";
19. linkTextNode.onclick = function() {
20. for (j = 0; j < arrEls.length; j++) {
21. getTextNodeByLangName(arrEls[j],’show’);
22. }
23. };
24. els[i].style.display = ‘none’;
25. } else if (eventNode == 'show') {
26. linkTextNode.innerHTML = messageHide;
27. linkTextNode.className = "link-hide";
28. linkTextNode.onclick = function() {
29. for (j = 0; j < arrEls.length; j++) {
30. getTextNodeByLangName(arrEls[j],’hide’);
31. }
32. };
33. els[i].style.display = ‘block’;
34. }
35. }
36. }
37. }
38.  
39. function init_textNode() {
40. if (!document.getElementsByTagName) return
41. for (j = 0; j < arrEls.length; j++) {
42. getTextNodeByLangName(arrEls[j],’hide’);
43. }
44. }
45.  
46. addLoadEvent(init_textNode);

A grande mudança está na localização do atributo lang, como a seguir:

1. var lang = els[i].getAttribute(”lang”);
2. if (lang == 'en') {

Agora, a classe que antes era responsável por esconder os conteúdos, agora ficou apenas com o trabalho de estilizar estas áreas. ;)

Esta postagem foi criada em 6/11/06 às 8:39 am e pertence à(s) seguinte(s) categoria(s): DOM, Desenvolvimento, Lab. Você pode receber os comentários para esta mensagem via RSS 2.0 feed. Você pode, também, inserir uma resposta, ou inserir um trackback em seu site.