0

Estoy tratando de obtener lo que es el elemento que estoy haciendo clic, pero ni idea de cómo proceder. Este es el caso concreto:

Esquema Html:

<div class="item">
  <div class="front"></div>
  <div class="back"></div>
</div>
<div class="item"> <!-- Pongamos que clico este elemento -->
  <div class="front"></div>
  <div class="back"></div>
</div>
<div class="item">
  <div class="front"></div>
  <div class="back"></div>
</div>
...

Estoy vinculando cuando se hace clic en un elemento con el siguiente código JQuery:

$('.item').on('click', (event) => {
      //¿Cómo puedo obtener aquí el elemento? concreto
      myElement.animate({...}, 5000, function() {...});
});

¿Como podría detectar el elemento concreto que estoy haciendo clic (Y no todos los de la clase)?

3
  • Hola y bienvenido. Estás es StackOverflow en español. Por favor traduce tu pregunta o trasládala al sitio en inglés. Hi and welcome. You are in StackOverflow in Spanish. Please, translate your question or move it to the English website.
    – DjCrazy
    Commented el 29 oct. 2022 a las 18:05
  • Tan solo debes cambiar la función flecha por una normal (pues la función flecha te impide usar $(this)) y donde pones myElement pones $(this) y debería funcionarte. Ya nos dirás si te ha funcionado.
    – masterguru
    Commented el 30 oct. 2022 a las 9:36
  • Me despista cuando dices: "lo que es el elemento". ¿que quieres ? su tipo, su clase, el elemento (para hacer cosas con el) no tengo muy claro que buscas.
    – E.rick
    Commented el 1 nov. 2022 a las 10:04

3 respuestas 3

0

Debes cambiar la funcion de flecha por una función normal, pues la de flecha no reconoce el $(this) que representa el elemento clicado.

Prueba con esto:

$('.item').on('click', function(event) {
  $(this).css("color", "red");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="item">uno
  <div class=" front"></div>
  <div class="back"></div>
</div>
<div class="item">dos
  <div class=" front"></div>
  <div class="back"></div>
</div>
<div class="item">tres
  <div class=" front"></div>
  <div class="back"></div>
</div>

0

Tienes que utilizar el campo target del evento

$('.item').on('click', (event) => {
    $(event.target).animate({...}, 5000, function() {...});
});

Ahora bien, puedes ocupar "this", pero debes cambiar la función lambda por una tradicional, ya que el scope (el ambito) de las 2 son distintos

$('.item').on('click', function() {
    $(this).animate({...}, 5000, function() {...});
});
0

La clave es $(this) y attr.

https://www.w3schools.com/jquery/default.asp (localiza el elemento)

https://www.w3schools.com/jquery/html_attr.asp (atributo clase)

$('div').on('click', function() {
$( "#info" ).text('el elemento cliccado es de clase:'+ $( this ).attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="item1">
  <div class="front">uno</div>
  <div class="back">dos</div>
</div>
<div class="item2"> <!-- Pongamos que clico este elemento -->
  <div class="front">tres</div>
  <div class="back">cuatro</div>
</div>
<div class="item3">
  <div class="front">cinco</div>
  <div class="back">seis</div>
</div>
<div id ="info">
info
</div>

https://api.jquery.com/click/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.