CODEWITHSUNDEEP
javascriptjqueryhtml
morizvi23
morizvi23

Reputation: 233

Explaining $(this)

I having trouble understanding $(this), I made a version of rock, paper, scissors and applied jQuery for the user to choose a button choice against the computer. I was hoping someone can explain what $(this) is referring to, is it the btn-primary? The function is below and if you need the html it is in the codepen link. Also, the result is shown in the console.

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);
});

Upvotes: 1

Views: 106

Answers (6)

Akshay Khale
Akshay Khale

Reputation: 8361

If you are from Object oriented programming background then there is this keyword which refers to the current object, calling the method in the same way $(this) in jquery refers to the DOM for which the event is occurred Eg.

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

In the above code $(this) refers to the element with ID submit_button and the result of the code will be submit_button in console of the browser since I am just logging the ID attribute of current element.

But $(this) can be useful in case of class selectors

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>

In the code snippet above $(this) can be used to identify which button has been clicked out of three buttons.

I hope $(this) will clear all your confusion of $(this) :)

Happy to help!

Upvotes: 1

zpr
zpr

Reputation: 2940

The $(this) in jQuery is referring to the btn-primary, yes, but not the selector as a whole. It refers to specifically that which triggered your anonymous function; that is, the button you clicked, as a jQuery object.

It is a common concept in object-oriented languages, and perhaps more intuitive. Say we have a class Dog, and we want to have several instances of this class: 

dog = new Dog('Albert');

Then we want a method on the dog: speak, for which the dog will bark its own name. The method might be written as so: (pseudocode)

class Dog {

  string name;

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

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

}

That ended up looking a lot like Java. So, the this similarly refers to the calling scope. Because we could have many dogs, each with their own names, and we need a convenient way to get ours. Other languages call this self.

Upvotes: 4

Lucas Rodriguez
Lucas Rodriguez

Reputation: 1203

$(this) will refer to the DOM element in which the event have occurred.

Upvotes: 1

Avitus
Avitus

Reputation: 15958

this is a reference to the member that invokes the current function.

then you can wrap it in the jquery function $() to select it just like you would another selector.

In the javascript that you have included you could have simply had this.id and not invoked jquery to do the selector. Changing your javascript to be:

$(".btn-primary").on("click", function () {
    userChoice = this.id;
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});

Upvotes: 2

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

this refers to the DOM element that the event fired on - in this case the DOM element that was clicked. It refers only to the single element that was clicked, not all .btn-primary elements.

By using $(this) we are selecting it using jQuery, effectively wrapping the element and letting us use further jQuery methods on it.

Upvotes: 2

MPT
MPT

Reputation: 193

When you attach an event handler to an element using jQuery, "this" refers to that element (note - it is not a wrapped jQuery object, hence the additional wrapping in $() prior to calling the attr() method).

Upvotes: 1

Related Questions