0

I was wondering how to use the $(this) selector in a function. I have tried multiple ways found on the internet but none seem to work.

Here's an example of what I'm trying to do

function bobsCar() {
   $(this).toggle();
}

$('p').click(function() {
   bobsCar();
});
ItsNotAbyss
  • 255
  • 1
  • 2
  • 6
  • 1
    What element do you want t use the function for ???? – krachleur Feb 27 '15 at 09:33
  • For the rules on how `this` is set in a function, read this: http://stackoverflow.com/questions/28016664/when-you-pass-this-as-an-argument/28016676#28016676. Since `bobsCar()` is a normal function call, per the Javascript rules, `this` will be either `window` or `undefined` (if running in strict mode). The value of `this` is NOT automatically preserved when you call a function. It is reset according to how the function is called (see the above referenced rules). – jfriend00 Feb 27 '15 at 09:44

6 Answers6

1

Another option is to execute the function with a custom context like.

function bobsCar() {
   $(this).toggle();
}

$('p').click(function() {
   bobsCar.call(this);
});

In your case since you are calling bobsCar without a context, this inside it refers to the window object that is why it is not working.

Arun P Johny
  • 365,836
  • 60
  • 503
  • 504
1

function bobsCar() {
   $(this).toggle();
}

jQuery('p').click(function() {
   bobsCar.call(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>click me</p>

You need to understand JavaScript contexts. By default if you call a method inside your click callback, it will use the global context (in this case window - try console logging this in your broken function), not the one in the callback. You can use call or apply to specify the context (in this case this refers to the DOMNode element in the callback, so we pass the same context to the function and it works).

This is a good article on the topic: http://yehudakatz.com/2011/08/11/understanding-JavaScript-function-invocation-and-this/

Dominic
  • 48,717
  • 14
  • 109
  • 126
1

The value of this inside the click event handler is not a string representation of a selector. It is a DOM node.

If you want to override the normal value of this for a function, you can specify it with call or apply.

bobsCar.call(this);

You could pass it as an argument instead.

bobsCar(this);

function bobsCar(domNode) {
    $(domNode).toggle();
}

You should probably just use the function as the event handler in the first place though.

$('p').click(bobsCar);
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
0

You cannot directly use this in called function. You must have to pass selected object as function argument.

function bobsCar(element) {
   $(element).toggle();
}

$('p').click(function() {
   bobsCar(this);
});
Sadikhasan
  • 17,212
  • 19
  • 72
  • 111
0

This inside the function no longer reefers tot he 'p' tag, you could pass it

function bobsCar(el) {
  el.toggle();
}

$('p').click(function() {
   bobsCar($(this));
});
atmd
  • 7,034
  • 2
  • 28
  • 62
-1

In JavaScript the $(this) is a context-pointer. It gives you the top-most context that is placed on the stack.

function bobsCar(elm) { console.log(elm);
$(elm).parent().toggleClass(); }

$('p').click(function() { var $this=$(this); bobsCar($this); });

jsfiddle.net/q325d6zw

Naresh Sharma
  • 1