How jQuery handle 'this' in the array function?

Question

I am very new in jQuery. I wrote a code

$(document).ready( function() {
        a= $( '.play' ).click( function() {
                let a = this;
                a.css( 'background-image', 'url(pause.svg)' );
                return a;
        } );
)};

Then when I console a, I get the correct result also a.css is referring to jQuery. but when i clicking on the element a type-error returned.

TypeError: a.css is not a function

Maybe I am not yet properly understand async JavaScript call. My question is, why I am getting this error? How jQuery handle this keyword in to the Array Function?

--- Problem Solved ---

I found this vs $(this) discussion is my answer.

I suggest you console.log(this) then you will understand how this object works. It points to current execution. It has all the information of that element. — Harsimranjit Singh
– Harsimranjit Singh, Commented Mar 16, 2020 at 5:07

Death-is-the-real-truth · Accepted Answer · 2020-03-16 05:16:31Z

2

let a = this;

needs to be

let a = $(this); // now it will create an object of current click element.

I think below code will work perfectly as well,try it.

$(document).ready( function() {
    $( '.play' ).click( function() {
        $(this).css( 'background-image', 'url(pause.svg)' );
    });
)};

Note: this refer to a javascript object and work in a different manner.For more details read below links(regarding what it is, how it works based on different mode and way of calling)

javascript this

this vs $(this)

edited Mar 16, 2020 at 5:16

answered Mar 16, 2020 at 5:02

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Negi Rox · Accepted Answer · 2020-03-16 06:11:41Z

1

you just need to understand basic.

this -> Html DOM element. //the classic JavaScript API is exposed here
$(this)-> $() + this -> you are passing element in a jQuery Constructor-> JQuery object. // jQuery API is exposed

So when you do that you are enabling jQuery Object so you can play with it.

answered Mar 16, 2020 at 6:11

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Collectives™ on Stack Overflow

How jQuery handle 'this' in the array function?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related