Tengo problemas para comprender $(this), hice una versión de piedra, papel, tijera y apliqué jQuery para que el usuario elija una opción de botón contra la computadora. Esperaba que alguien pudiera explicar a qué se refiere $(this), ¿es el btn-primary? La función está debajo y si necesita el html está en el enlace codepen. Además, el resultado se muestra en la consola.

https://codepen.io/anon/pen/VeLWKP

$(".btn-primary").on("click", function () {
    userChoice = $(this).attr("id");
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});
1
morizvi23 10 dic. 2015 a las 06:41

6 respuestas

La mejor respuesta

Si usted es de programación orientada a objetos , entonces hay this palabra clave que se refiere al objeto actual, llamando al método de la misma manera $(this) en jquery se refiere al DOM para cual es el evento ocurrido P.ej.

$("#submit_button").click(function(){
    console.log($(this).attr('id'));
})

En el código anterior $(this) se refiere al elemento con ID submit_button y el resultado del código será submit_button en la consola del navegador ya que solo estoy registrando el atributo ID del elemento actual.

Pero $(this) puede ser útil en caso de selectores de clase

Eg.

<!-- Just snippet not complete code -->
<button class='color' id='red'>Red</button>
<button class='color' id='green'>Green</button>
<button class='color' id='blue'>Blue</button>
<script>
$(".color").click(function(){
    console.log($(this).attr('id'));
})
</script>

En el fragmento de código que se encuentra arriba de $ (esto) se puede usar para identificar qué botón se ha extraído de tres botones.

Espero que $(this) aclare toda su confusión de $(this) :)

Encantada de ayudar!

1
Akshay Khale 10 dic. 2015 a las 04:18

Esta es una referencia al miembro que invoca la función actual.

Entonces puede envolverlo en la función jquery $ () para seleccionarlo como lo haría con otro selector.

En el javascript que ha incluido, podría haber tenido this.id y no invocado jquery para hacer el selector. Cambiar su javascript para que sea:

$(".btn-primary").on("click", function () {
    userChoice = this.id;
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});
2
Avitus 10 dic. 2015 a las 03:44

Cuando adjunta un controlador de eventos a un elemento usando jQuery, "esto" se refiere a ese elemento (nota: no es un objeto jQuery envuelto, de ahí el ajuste adicional en $ () antes de llamar al método attr ()).

1
MPT 10 dic. 2015 a las 03:43

$(this) se referirá al elemento DOM en el que ocurrió el evento.

1
Lucas Rodriguez 10 dic. 2015 a las 03:44

this se refiere al elemento DOM en el que se activó el evento, en este caso el elemento DOM en el que se hizo clic. Se refiere solo al elemento único en el que se hizo clic, no a todos los elementos .btn-primary.

Al usar $(this) lo estamos seleccionando usando jQuery, envolviendo efectivamente el elemento y permitiéndonos usar más métodos jQuery en él.

2
Maximillian Laumeister 10 dic. 2015 a las 03:44

El $(this) en jQuery se refiere al btn-primary, sí, pero no el selector en su conjunto. Se refiere específicamente a lo que activó su función anónima; es decir, el botón en el que hizo clic, como un objeto jQuery.

Es un concepto común en lenguajes orientados a objetos, y quizás más intuitivo. Digamos que tenemos una clase Dog, y queremos tener varias instancias de esta clase:

dog = new Dog('Albert');

Entonces queremos un método en el perro: speak, para el cual el perro ladrará su propio nombre. El método podría escribirse así: (pseudocódigo)

class Dog {

  string name;

  function Dog(name) {
    this.name = name;
  }

  function speak() {
    return "I'm "+ this.name + "! Bark!";
  }

}

Eso terminó pareciéndose mucho a Java. Entonces, this se refiere de manera similar al alcance de la llamada. Porque podríamos tener muchos perros, cada uno con sus propios nombres, y necesitamos una forma conveniente de obtener el nuestro. Otros idiomas llaman a esto self.

4
zpr 10 dic. 2015 a las 03:52