0

Olá, sou iniciante no jquery e tenho o seguinte problema: Tenho um mesmo elemento que se repete várias vezes na página, e quando eu clico sobre ele preciso executar uma função. Porém a função está sendo executada para todos os elementos que possuem essa classe. Gostaria que a função fosse executada apenas para o elemento que eu cliquei, independente de ter outros com a mesma classe. Vejam meu jquery aqui:

const details = $('.open-details');
const additional = $('.additional-texts');
details.each(function(){
 $(this).on('click', function(event){
  if (additional.hasClass('open')) {
     additional.slideUp("slow");
     $('.arrow').css('transform', 'rotate(0deg)');  
  } else {
     additional.slideDown("slow");
     $('.arrow').css('transform', 'rotate(180deg)');  
  }
  additional.toggleClass('open');
 });
});

Gostaria que quando clicasse na div 'details' acionasse o restante da função. Fiz assim mas ele executa para todas as divs 'details' presentes na página. Qualquer ajuda é bem vinda :)

1 Resposta 1

2

O comportamento que relata na pergunta é estranho. Verifique se está olhando para os elementos corretos e se não há alguma outra parte do seu código alterando o comportamento desejado. Dito isso, como necessita que o evento seja disparado apenas no elemento clicado, você pode atrelar um evento a ele utilizando um seletor mais específico, apenas no elemento desejado:

$(document).ready(function () { 
    // o identificador abaixo pode ser um ID, um seletor mais específico, etc.
    $('#div1').click(function () { /*...*/ });
    $('#div2').click(function () { /*...*/ });
    $('#div3').click(function () { /*...*/ });
});

Se preferir, pode fazer isso atribuindo um evento de onclick diretamente na tag HTML do seu elemento:

<div onclick="evento()">...</div>

Caso perceba que os eventos estão sendo disparados em vários outros elementos (como elementos "pai"), pode impedir sua propagação com o método stopPropagation ou stopImmediatePropagation (cancelBubble no IE):

event.stopPropagation(); // ou stopImmediatePropagation

Como mencionei o comportamento estar estranho, segue um snippet que faz a seleção de elementos da mesma forma (por classe). Tente trocar as seleções e atribuições de eventos e veja o que funciona melhor para o seu caso de uso:

$(document).ready(function () {
  $('.div').each(function () {
    $(this).click(function () {
      if ($(this).css('color') == 'rgb(255, 0, 0)') {
          $(this).css('color', 'rgb(0, 0, 0)');
        } else {
          $(this).css('color', 'rgb(255, 0, 0)');
        }
    })
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="div">Div 1</div>
<div id="2" class="div">Div 2</div>
<div id="3" class="div">Div 3</div>

Espero ter ajudado de alguma forma.

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 .