JQuery - $this is not defined

Question

Trying to get this code to work but the error I am getting in firebug is $this is not defined and I don't understand why

To explain the background about this code I have a list of spans with identical classes so when I click on particular span I need to send an ajax request and update that particular span.

Hopefully that makes sense.

$(document).ready(function() {

function postAndFade($node, post_key) {
    var id = $node.parents('.id').find('.id-value').text();
    var post_val = $node.text();
    $node.fadeOut('slow');

    $.ajax({
        type: "POST",
        url: "process.php",
        data: "id="+id+"&"+post_key+"="+post_val,
        success: function(data) {
           $node.html(data);
           $node.fadeIn('slow');        
        }
    });
return false;
}
$('.featured-value').click(function() { return postAndFade($this, 'featured'); });
$('.visible-value').click(function() { return postAndFade($this, 'visible'); });
});

Answer 1

Because it's not - you're looking for $(this).

Fuller explanation - jQuery sets the context of event handlers by setting the value of this to the element triggering the event. In order to reference this in jQuery, you need to wrap it in a jQuery call, like this: $(this). Because you often need to do lots of stuff with that element, it's a common coding pattern to assign it to a variable called $this:

$(el).click(function() {
    var $this = $(this);
    // now do stuff with $this
});

But that's a convention, not something jQuery does for you.

Answer 2

use this code

$(this) instead of $this

Answer 3

You want $(this), not $this.

Answer 4

You want

$('.featured-value').click(function() { return postAndFade($(this), 'featured'); });
$('.visible-value').click(function() { return postAndFade($(this), 'visible'); });

this is a reference to the DOM element.

$this isn't anything, it is sometimes used like so: var $this = $(this) in order to save the jQuery object, so you aren't recreating it multiple times.

Answer 5

Try to use $(this) instead of $this

$('.featured-value').click(function() { return postAndFade($(this), 'featured'); });
$('.visible-value').click(function() { return postAndFade($(this), 'visible'); });