Javascript Como especificar uma class ?

[Diogou]

function abrir() {
    document.getElementById("re").style.display = "block";
    document.getElementById("bre").setAttribute("onclick", "fechar()");
}

function fechar() {
    document.getElementById("re").style.display = "none";
    document.getElementById("bre").setAttribute("onclick", "abrir()");
}

Um código simples, pra esconder e mostrar uma div sempre que clicar em um botão. Mas por ser id, só posso ter um 1 objeto com essa identificação. E no caso se eu fosse fazer vários botões, com essa mesma função.

Como eu especifico que eu quero aquele botão e aquela div? (no meio de vários mesmo objetos com a mesma class)

[navegantenarede]

@MyNameIsMech, você pode usar o querySelector e usar a classe como identificador, ou getElementsByClassName, mas nesse caso vai retornar um vetor de objetos.

[DiF]

@MyNameIsMech Ou você simplesmente pode usar o "this"  isso faz referência ao próprio objeto que é criado.

 

Então por exemplo imagine que você tem 3 elementos DIV, contendo uma estrutura interna, onde cada um tem um texto escondido. 

O objetivo é especificar qual dos elementos DIV você quer mostrar certo?

 

Para isso veja esta estrutura:

<div class="wrap">
  <div><a href="#" class="btn">Mostrar/Ocultar</a></div>
  <div class="box">
    <div class="inner-box">Texto escondido!</div>
  </div>
</div>

No CSS: você pode usar o display none OU  Visibility.

Eu uso o visibility.

 

.active{
  visibility: visible;
}

 

 

No javascript puro, você provavelmente teria que fazer um laço de for para contar todos os elementos.. e acessar um deles.

Mas no jQuery a sua vida é extremamente melhorada!

 

Bastante fazer 3 linhas!

 $('.wrap a').click(function () {
     $(this).parent().next().toggleClass('active');     
 });
 

Basicamente, o código acima funciona da seguinte maneira:

 

Ao clicar o elemento <a>, o jquery entende que você quer adicionar uma classe "active" ao elemento parente do próprio elemento instanciado.

 

Vemos isso ali em:  $(this).parent().next()     O parent() é referente ao DIV, ou seja, por isso que foi necessário colocar o elemento <a> dentro de um elemento <div>.  

O next()  é referente a posição do elemento div que você quer mostrar. Como está abaixo é next().  Mas se estivesse acima, seria prev().

 

O toogleClass() faz com que alterne a classe em algum elemento.  Ele coloca ou tira.

 

Veja o exemplo funcionando online: http://jsfiddle.net/Lq2pw6j7/32/