When you are running a function, you may have the selector, a method and then the function

$(".clickHereBox").click(function(){
  /// code goes here
});

In the example above the selector looks for all of items in the document with class="clickHereBox". The method is .click(), so when someone clicks on any of the elements with that class name, that function will run.

Say that once you have clicked on the element with the class="clickHereBox", you want to change the background color of the element, to show that this has been clicked. You might want to have something like the following inside of the function.

$(".clickHereBox").click(function(){
    $(".clickHereBox").css("background-color","#DDDDDD");
    // other code goes here
)};

The problem with this approach is that it will change the background of EVERY element with class="clickHereBox" throughout the page. This defeats the purpose of having a clicked box turned grey if all the click boxes are grey, whether they have been clicked or not.

 

Use $(this) to select the item that received the action

The answer to this is to use $(this) to represent the individual element that received the action. This way only that one element will change and the other elements that match the selector will not change. The word this does not get put into quotation marks.

$(".clickHereBox").click(function(){
    $(this).css("background-color","#DDDDDD");
    // other code goes here
)};

Below is the result. Note how only the box that has been click will have the background color changed.