0

Olá,

Consigo saber dentro de some_function qual foi a classe que despoletou o evento click (.class1 ou .class2)?

$('.class1, .class2').click(some_function);

Obrigado.

1
  • E se o elemento tiver desta forma? <button type="button" class="class1 class2">? Commented 17/10/2019 às 14:20

3 Respostas 3

4

Pode usar $(this).hasClass("class1").

O $(this) pega o elemento que disparou o evento, e o hasClass verifica qual classe possui.

$('.class1, .class2').click(function() {
  var class1 = $(this).hasClass("class1");
  var class2 = $(this).hasClass("class2");
  
  console.log("Foi class1=" + class1);
  console.log("Foi class2=" + class2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <button class="class1">Class 1</button>
</p>
<p>
  <button class="class2">Class 2</button>
</p>

2
  • Obrigado! É possível fazer o mesmo por id (#id) ? Commented 17/10/2019 às 14:24
  • vc diz saber se um elemento com um id específico tem uma certa classe? se for é sim Commented 17/10/2019 às 14:28
4

É possivel saber quais as classes do elemento que despoletou o evento sim. Podes usar this dentro dessa função, que será o elemento clicado, e aí saber as classes desse elemento ou comparar se o elemento tem uma classe específica.

Exemplo:

$('.class1, .class2').click(some_function);


function some_function() {
  const todasAsClasses = this.className;
  const temClasse1 = this.classList.contains('class1');
  const temClasse2 = this.classList.contains('class2');
  console.log(todasAsClasses, temClasse1, temClasse2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="class1">
  Btn 1
</button>
<button type="button" class="class2">
  Btn 2
</button>

4
  • E se o elemento tiver desta forma: <button type="button" class="class1 class2">?. A princípio, eu imaginei que ele queria saber era dessa forma, achei complicado saber qual seria a classe, casso fosse assim. Commented 17/10/2019 às 14:20
  • @TaffarelXavier nesse caso o meu exemplo dá true true para ambas as classes, terias que verificar ambos.
    – Sergio
    Commented 17/10/2019 às 14:35
  • Como fazer, especificamente nesse caso? Acredito que não seja possível. Commented 17/10/2019 às 14:36
  • @TaffarelXavier Nesse caso bastaria fazer if (temClasse1 && temClasse2) { faz algo específico para quando tem as 2 classes } - e aí vc trata da maneira que achar melhor (que não foi especificado na pergunta o que é pra fazer)
    – hkotsubo
    Commented 17/10/2019 às 14:44
3

Forma bem simples:

$('.class1, .class2, .class3').click(function(ev){
     console.log(ev.target.className + " disparou o evento");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <button class="class1">Class 1</button>
</p>
<p>
  <button class="class2">Class 2</button>
</p>

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 .