2

Eu estou criando um sistema de posts feitos com divs, porém como todas as divs vão ter a mesma nomenclatura de classes eu preciso que quando eu clicar em alguma o javascript ataque apenas a própria sem interferir nas outras. Somente com js, não uso jquery!

Exemplo, se eu clicar em abrir o menu do post, quero que apenas esse menu abra sem abrir a dos outros posts.

2
  • Você não tem nenhum código a acrescentar? Quer fazer isso somente com js? Pode ser com jquery?
    – LocalHost
    Commented 10/01/2017 às 2:13
  • @LocalHost Infelismente não, pois ainda não sei como criar, amanhã eu ponho o código do HTML porque agora estou pelo celular!
    – Victor M.
    Commented 10/01/2017 às 2:15

2 Respostas 2

2

Com jquery o método click pega todos os elementos com determinada classe, após isso você envia o clicado por parâmetro e pega com o this...

$('.ctn').click(function(e){
	alert($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ctn">
  div 1  
</div>
<div class="ctn">
  div 2
</div>
<div class="ctn">
  div 3 
</div>
<div class="ctn">
  div 4
</div>

1
  • Então é só usar o 'this'?
    – Victor M.
    Commented 10/01/2017 às 2:22
1

Com JavaScript puro:

var elementoAtual = document.getElementsByClassName("minha-classe");

Array.prototype.slice.call(elementoAtual).forEach(function(pegaElementoAtual){
    pegaElementoAtual.addEventListener('click', function(e){
       alert(this.innerHTML);
    });
});
body{
    font-family: 'calibri light', sans-serif;  
}
div{
    padding: 5px;
}
div.minha-classe{
    text-align: justify;
    text-indent: 25pt;
}
<div class="minha-classe">
    Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove illiteracy and strengthen our democracy.
</div>
<div class="minha-classe">
    I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died and twenty were injured. Administration was responsible for it.
</div>
<div class="minha-classe">
    City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van every morning. They should maintain the cleanliness of the city. This will make the city pollution free.
</div>

Você não postou código algum, mas isso pode ser facilmente elaborado com o seguinte (com JQuery):

$('div.minha_classe').on('click', function(){
   var elementoAtual = $(this);
   // Faça o que quiser a partir daqui
});
11
  • Então é só usar o 'this' ?
    – Victor M.
    Commented 10/01/2017 às 2:22
  • Basicamente! O $(this) se refere ao elemento do contexto atual. Isso em JQuery. Em puro Javascript é só usar a palavra this Commented 10/01/2017 às 2:27
  • 1
    document.getElementsByClassName retorna um array de itens DOM, ele não vai funcionar se fizer assim elementoAtual.addEventListener('click', o correto seria usar um for. ;D
    – Syzoth
    Commented 11/01/2017 às 21:23
  • 1
    ...anteriormente prefira remover, assim deixa mais limpo e claro a intenção para quem pergunta ;), espero que eu tenha conseguido lhe ajudar quanto a um melhor uso do site.
    – Syzoth
    Commented 11/01/2017 às 22:27
  • 1
    Ajudou sim, @GuilhermeNascimento! Muito obrigado. Commented 12/01/2017 às 0:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .