[Resolvido] span e .innerHTML

[Freelife 2]

Galera...

 

Eu to fazendo uma ação assim...

 

Se o conteúdo estiver visível

<span id="atual">Ocultar</span>;

 

Se estiver oculto:

<span id="atual">Mostrar</span>;

 

O problema é que eu tenho vários spans e se eu coloco o id ele só muda o primeiro.

Tem como identificar o id do link que a pessoa clicou, verificar qual o estado e modificar o conteúdo do span dinamicamente, sem fazer tudoooo manual?

 

Abraços

[Jonathan Queiroz 1]

Você pode fazer assim:

<span onclick="Ocultar('id_do_elemento')">Ocultar</span>
<span onclick="Mostrar('id_do_elemento')" id="atual">Mostrar</span>;

E o JS ficaria assim:

function Ocultar(id_do_elemento){
elemento=document.getElementById("id_do_elemento")
elemento.style.visibility="hidden"
}
function Mostrar(id_do_elemento){
elemento=document.getElementById("id_do_elemento")
elemento.style.visibility="visible"
}

Qualquer dúvida posta aí !

[Henrique Barcelos 290]

O problema é que eu tenho vários spans e se eu coloco o id ele só muda o primeiro.

Como assim??? você tá atribuindo o msm id para varios spans??? não pode... atribua classes...

[Freelife 2]

Bom dia...

 

Então... eu usei id's pois não sei como mudar para pegar classes, mas o maior problema não é esse.

Imagine que tenho um conteúdo enorme de texto, tipo um "Help" cada tópido têm sub-tópicos, do lado do tópico eu tenho o "span" que terá os textos "mostrar" ou "ocultar". Agora imagine se eu tiver que criar uma função para cada id.

 

Eu não sei js estou usando esse código porque pesquisei na net e o encontrei, entendo o que ele faz, mas gostaria que ele identificasse o id do link dinamicamente e mudar somente o conteúdo do span referente à ele.

 

Esse código que o Jonathan Queiroz postou eu não consegui fazer ele funcionar.

 

Vlw por enquanto.

 

Abraços

[klonder 14]

Eu utilizei o "inline", mas você pode utilizar o "block" se assim o preferir. Segue o código:

 

<script type="text/javascript">

function mostrar(e) { 
document.getElementById("texto"+e).style.display = "inline";
document.getElementById("mostrar"+e).style.display = "none";
document.getElementById("ocultar"+e).style.display = "inline";
}

function ocultar(e) { 
document.getElementById("texto"+e).style.display = "none";
document.getElementById("mostrar"+e).style.display = "inline";
document.getElementById("ocultar"+e).style.display = "none";
}
</script>

<span id="texto1" style="display:none;">Esse é o meu texto 1</span> | <span id="mostrar1" onClick="mostrar(1)" style="display:inline; cursor:hand">Mostrar</span> <span id="ocultar1" onClick="ocultar(1)" style="display:none; cursor:hand">Ocultar</span>

<br><br>

<span id="texto2" style="display:none;">Esse é o meu texto 2</span> | <span id="mostrar2" onClick="mostrar(2)" style="display:inline; cursor:hand">Mostrar</span> <span id="ocultar2" onClick="ocultar(2)" style="display:none; cursor:hand">Ocultar</span>

<br><br>

<span id="texto3" style="display:none;">Esse é o meu texto 3</span> | <span id="mostrar3" onClick="mostrar(3)" style="display:inline; cursor:hand">Mostrar</span><span id="ocultar3" onClick="ocultar(3)" style="display:none; cursor:hand">Ocultar</span>

[Freelife 2]

Vlw...

 

Muito bom... Funcionou certinho! Eu já havia tentando um monte de coisas e não tinha conseguido.

 

Vlw

 

Abraços