2

tengo un problema, es que estoy utilizado jquery, y necesito que al pulsar un elemento se le aplique un estilo, el problema viene a que todos los elementos tiene la misma clase y se que se puede evaluar con el objeto evento que recibe la función, pero eso solo es cuando tienes un X numero de elemento los cuales tu conoces, pero los elementos que están vienen de una consulta de la BBDD, asi que es un problema aplicarle el estilo a ese único elemento clickado, por aqui dejo el codigo:

 <div class="tarjeta-imagen">
      <img src="./assets/img/perfil.jpg" alt="" class="img-card">
           <div class="tarjeta-footer">
                 Texto de prueba
            </div>
</div>

JQ:

  $(".tarjeta-imagen").click( function(e){

    var elEvento = e;

    $(".tarjeta-footer").css({

        background: '#4BD19B'

    });

})

2 respuestas 2

3

La solución lleva dos partes.

  1. Agrega un monitor (event listener) a cada uno de los elementos. Una forma de hacerlo es usando forEach.
  2. Usa la función this para para modificar las propiedades del elemento sobre el que se ha hecho clic.

Lo anterior se puede hacer con JavaScript puro. A continuación un ejemplo.

Se muestra una tabla de 3 x 3. Al hacer clic en un celda se agregará un texto y color de fondo a la celda cliqueada.

[].forEach.call(document.getElementsByTagName('td'), function(td) {
  td.addEventListener('click', function() {
    this.innerHTML = '¡Clic!';
    this.style.background = '#4BD19B';
  });
});
td {
  height: 50px;
  width: 100px;
  border: solid;
  background-color: yellow;
}
<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

A continuación un ejemplo usando jQuery

$('td').on('click',function() {
    this.innerHTML = '¡Clic!';
    this.style.background = '#4BD19B';
  });
td {
  height: 50px;
  width: 100px;
  border: solid;
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

1

Lo puedes hacer utilizando el operador this, lo he probado de la siguiente manera;

    $(document).ready(function(){
    		 	$(".tarjeta-imagen").click( function(){
    
    		    $(this).css({
    		        background: '#4BD19B'
    		    });
    		})
    	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <div class="tarjeta-imagen">
          <img src="./assets/img/perfil.jpg" alt="" class="img-card">
               <div class="tarjeta-footer">
                     Texto de prueba
                </div>
    </div>
     <div class="tarjeta-imagen">
          <img src="./assets/img/perfil.jpg" alt="" class="img-card">
               <div class="tarjeta-footer">
                     Texto de prueba
                </div>
    </div>

En general, el valor de this está determinado por cómo se llama a la función. No puede ser establecida por una asignación en tiempo de ejecución, y esto puede ser diferente cada vez que la función es llamada.

Documentación: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/this

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.