[Resolvido] docuement.getElementById

[Videres 3]

Eae Galera, tudo de boas?!!

 

Sou um pouco leigo em javaScript, mas estou aprendendo a passo de tartaruga... asuhasuha

Me deparei com uma situação, na qual n tenho encontrado respostas em minhas pesquisas. ^^

 

Estou construindo um "menu dinâmico", onde quero executar uma coisa simples, que é sumir e aparecer uma determinada DIV.

 

Minha dúvida é a seguinte:

É possivel eu construir uma variavel global que recebe todos os IDs das divs referenciadas pelos links da minha pagina no meu java script como mostra abaixo_

 

function aparecer(variavelRecebeIDS){
   var ids = document.getElementById(variavelRecebeIDS);
}

 

Links_ (onde referencio os ids das minhas divs

<a  href="#" onclick="aparecer(id1)" >btn1</a>
<a  href="#" onclick="aparecer(id2)" >btn2</a>
<a  href="#" onclick="aparecer(id3)" >btn3</a>
<a  href="#" onclick="aparecer(id4)" >btn4</a>

 

 

Divs_

<div id="id1">content1 </div>
<div id="id2">content2  </div>
<div id="id3">content3  </div>
<div id="id41">content4  </div>

 

 

 

 

Ao inves de criar:

 

 

function aparecer(variavelRecebeValores){

   if(variavelRecebeValores == 1 ){
       document.getElementById("id1").style.display ='block';
       document.getElementById("id2").style.display ='none';
       document.getElementById("id3").style.display ='none';
       document.getElementById("id4").style.display ='none';
   }
   ...... [assim por diante]

}

 

Links_ (onde referencio os ids das minhas divs

<a  href="#" onclick="aparecer(1)" >btn1</a>
<a  href="#" onclick="aparecer(2)" >btn2</a>
<a  href="#" onclick="aparecer(3)" >btn3</a>
<a  href="#" onclick="aparecer(4)" >btn4</a>

 

 

Divs_

<div id="id1">content1 </div>
<div id="id2">content2  </div>
<div id="id3">content3  </div>
<div id="id41">content4  </div>

 

 

 

Não sei se esta dando para entender... mas se isso for possivel eu economizo mtas linhas de códigos. asuhsauahs

Se alguem tiver alguma sugestao melhor e puder me dar uma luz fico mto agradecido. =D

 

Abraço, fico agradecido desde ja!

 

 

 

ps.: ja tentei fazer como o primeiro exemplo, porem n funfou... =/

[Lucas Guima 164]

Sugiro o uso de jQuery.

[Videres 3]

Sugiro o uso de jQuery.

 

Mas tipo lucas com Jquery da pra fazer como falei a cima criar uma variavel na qual referencia os ids da minha pagina principal?

 

Tipo ao inves de colocar o codigo dessa maneira, onde eu teria q fazer de 1 por 1:

$("#id1").click(function teste(){


});
$("#id2").click(function teste(){


});
...

 

Simplesmente:

 

$(variavelRecebeIds).click(function teste(){


});

 

Tipo eu gostaria de digamos criar uma unica funcao onde os valores do ID seria aleatorio, porem ambos iriam receber os valores que eu iria colocar na funcao...

 

N sei s deu pra entender? srrssrsr

 

Vlws pela ajuda... =P

 

Caso eu descubra como fazer posto aqui...! asuhsauhaus

[Lucas Guima 164]

Pelo que entendi, sua intenção é mostrar um conteúdo de acordo com o link, correto?

 

$(function($){
   $('a.link').click(function(){
       var id = $(this).attr('id');
       var content = id; // Você tem o id do link, aqui você resgata seja como for o conteúdo e joga na variável
       $('div#content').html(content);
   });
});

 

<a class="link" id="link1" href="#">Link 1</a>
<a class="link" id="link2" href="#">Link 2</a>
<a class="link" id="link3" href="#">Link 3</a>
<a class="link" id="link4" href="#">Link 4</a>

<div id="content"></div>

 

Se não entender algo, pergunte.

[Videres 3]

Pelo que entendi, sua intenção é mostrar um conteúdo de acordo com o link, correto?

 

$(function($){
   $('a.link').click(function(){
       var id = $(this).attr('id');
       var content = id; // Você tem o id do link, aqui você resgata seja como for o conteúdo e joga na variável
       $('div#content').html(content);
   });
});

 

<a class="link" id="link1" href="#">Link 1</a>
<a class="link" id="link2" href="#">Link 2</a>
<a class="link" id="link3" href="#">Link 3</a>
<a class="link" id="link4" href="#">Link 4</a>

<div id="content"></div>

 

Se não entender algo, pergunte.

 

Oi Lucas,

Brigadao pela força... acredito que o caminho seja esse que você me mostrou...

Eu gostaria de saber se teria como nos links passar os valores do id das divs com os conteudos tipo o exemplo que te mostrei a cima com javaScript:

 

function aparecer(variavelRecebeIDS){ //funcao onde recebo os valores do id pelos links
   var ids = document.getElementById(variavelRecebeIDS); //ids recebe os valores inseridos como parametro na funcao (que podem ser aleatorios, de acordo com o link)

   ids.style.display = 'block'; //agora estou dizendo que quero q seja exibido a div na qual o id foi passado como como parametro da funcaao -> aparecer(id).

}

 

Se a funcao funcionass como falei a cima seria excelente... mas de alguma forma a variavel que esta como parametro da funcao quando inserida no document.getElementById(variavelRecebeIDS) entra como valor nulo... provavelmente a sintaxe n é a correta

 

Links_ (onde referencio os ids das minhas divs

<a  href="#" onclick="aparecer(id1)" >btn1</a> // nos links seriam onde eu passaria os nomes dos ids das divs como parametro da funcao... (que pelo visto n ta funfando).
<a  href="#" onclick="aparecer(id2)" >btn2</a> 
<a  href="#" onclick="aparecer(id3)" >btn3</a>
<a  href="#" onclick="aparecer(id4)" >btn4</a>

 

 

 

Divs_

<div id="id1">content1 </div> 
<div id="id2">content2  </div>
<div id="id3">content3  </div>
<div id="id41">content4  </div>

 

Na teoria eu deveria clicar nos links e para funcao com os valores do ID, em seguida inserir o id na variavel ids, e dela executar um comando em uma determinada div.

 

N sei s agora ficou mais claro... eu estou tentando seguir o modelo de jquery pra ver s consigo alguma coisa.. asuhsauhau

 

mas s você tiver dicas fico mto agradecido... VLWS LUCAS tu é o CARa... asuhasuhu

[William Bruno 1501]

envie pelo atributo HREF, fica "mais semantico"

 

<a  href="#id2" onclick="aparecer( this.href )" >btn2</a> 

[Videres 3]

envie pelo atributo HREF, fica "mais semantico"

 

<a  href="#id2" onclick="aparecer( this.href )" >btn2</a> 

 

Vlws Bruno... vou tentar

Ja posto aqui o resultado \o

 

envie pelo atributo HREF, fica "mais semantico"

 

<a  href="#id2" onclick="aparecer( this.href )" >btn2</a> 

 

 

Mesmo colocando dessa forma... o valor do parametro da funcao inserido

document.getElementById(variavelRecebeID)

retorna null.

 

Não sei se a sintaxe esta de forma correta.. tentei também inserir a variavel da seguinte forma

document.getElementById(""+variavelRecebeID)

tambem n funfou.

 

srsrsrsrsr

 

Talvez exista ate uma forma mais tranquila de se fazer com jquery... se isso for possivel meu codigo reduziria bastante.

O objetivo desse codigo é fazer um mapa de uma universidade, que ao clicar em um determinado predio apareceria uma caixa de conteudo (minha div)... sao mais de 50 predios.. n gostaria de ter q dizer qm vai aparecer e sumir de 1 por 1.. meu codigo ficaria enorme. ehehhehe

 

Vou tentar pensar em outras maneiras... caso descubra uma forma mais simples, posto aqui... vlws \o

[Lucas Guima 164]

Bom, vamos lá. Eu não sei se é a maneira mais correta, mas acredito que atende à sua necessidade.

 

css

.hidden { display: none; }
.active { display: block; }

 

js

$(function($){
   $('a.link').click(function(){
       $('div.hidden').each(function(){
           $(this).removeClass('active');
       });

       $($(this).attr('href')).addClass('active');
   });
});

 

html

<a class="link" href="#content1">Link 1</a>
<a class="link" href="#content2">Link 2</a>
<a class="link" href="#content3">Link 3</a>
<a class="link" href="#content4">Link 4</a>

<div class="hidden" id="content1">Conteúdo 1</div>
<div class="hidden" id="content2">Conteúdo 2</div>
<div class="hidden" id="content3">Conteúdo 3</div>
<div class="hidden" id="content4">Conteúdo 4</div>

 

Ao clicar num link, ele retira a visibilidade de todos conteúdos e aplica somente ao que está especificado no href.

[Videres 3]

POW LUCAS ERA EXATAMENTE ISSO QUE EU QUERIAa.... n tinha pensando no href para colocar as variaves do ID das divs da forma q você fez.... na verdade pela falta de conhecimento.. asuhasushauas

Muito bom mesmo... fico muito agradecido!!! Reduziu mto meu CODIGO.

 

N sei se é a melhor forma.. mas funcionou prfeitamente! :thumbsup:

 

Abraço

 

[RESOLVIDO]