Targeting the specific link that the user clicks

Question

I have a page full of different links that each have a class of .post-link .

In the following function, I'd like the line $(this).html('loading...'); to target the specific .post-link div that is clicked. How would I go about achieving this? I feel I should create some sort of variable but I'm a bit lost. Any help would be appreciated.

$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    function projectShow() {
        $.ajax({
            type: 'POST',
            cache: false,
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('#project-wrapper').addClass('activated');
                $(this).html('loading...');                     <--line in question
            },
            success: function(response) {
                $('#project-container').html(response);
                $('.post-container').addClass('fadeInUp');
                $('.close-button').addClass('fadeOutDown');
                $('#project-wrapper .entry-title').shuffleLetters();
                return false;
            }
        });
    }

Edit

Here is how my HTML is set up:

<a class="post-link"><img src="image.jpg"></a>

Using Alexander's solution, the "loading..." text shows up like this:

<a class="post-link"><img src="image.jpg">loading...</img></a>

Is there a way to make it show like this?

<a class="post-link"><span>loading...</span><img src="image.jpg"></img></a>

Of course given that I wrap the text in span tags?

Update

$('.post-link').click(function(e) {
    e.preventDefault();


    var post_id = $(this).attr('rel'),
        ajaxURL = site.ajaxurl;

    function projectShow() {
        $.ajax({
            type: 'POST',
            cache: false,
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('#project-wrapper').addClass('activated');
                $('<span class="loading">loading...</span>').insertBefore($(e.currentTarget).find('img'));
            },
            success: function(response) {
                $('.loading').remove();
                $('#project-container').html(response);
                $('.post-container').addClass('fadeInUp');
                $('.close-button').addClass('fadeOutDown');
                $('#project-wrapper .entry-title').shuffleLetters();
                return false;
            }
        });
    }

    if ($(window).scrollTop() != 0) {
        projectShow();
        $('html, body').animate({
            scrollTop : 0
        },100);
    } else {
        projectShow();
    }
});

Answer 1

Use

$('<span>loading...</span>').insertBefore($(e.currentTarget).find('img'));

or

$(e.currentTarget).prepend('<span>Loading</span>'); 

because this in beforeSend does not refer to element

Answer 2

You could try something like:

$('.post-link').click(function(e) {

e.preventDefault();
// set a variable as a reference to 'this'
// prefixing variables containing jquery object with a '$' 
// as an easy way to spot them in your code

var $self = $(this),
    post_id = $(this).attr('rel'),
    ajaxURL = site.ajaxurl;

function projectShow() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        beforeSend: function() {
            $('#project-wrapper').addClass('activated');



            $self.html('loading...');
            // use if .post-link is a text element

            $self.prepend('<span>loading...</span>') 
            // if your .post-link is an image                


        },
        success: function(response) {
            $('#project-container').html(response);
            $('.post-container').addClass('fadeInUp');
            $('.close-button').addClass('fadeOutDown');
            $('#project-wrapper .entry-title').shuffleLetters();
            return false;
        }
    });
}

Although Alexander's answer is better as long as you don't override/re-declare the e

Answer 3

In browsers which support ES5 (IE >= 9), you can simply use .bind(this) to get context.

beforeSend: (function() {
    $('#project-wrapper').addClass('activated');
    $(this).prepend('<span>loading...</span>');                     
}).bind(this),

Answer 4

You may have overcomplicated it a bit. Why do it in beforeSend ? Just do it like this:

$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    // do it here:
    $('#project-wrapper').addClass('activated');
    $(this).find('img').before('<span>loading...</span>');

    function projectShow() {
        $.ajax({
            type: 'POST',
            cache: false,
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {
                $('#project-container').html(response);
                $('.post-container').addClass('fadeInUp');
                $('.close-button').addClass('fadeOutDown');
                $('#project-wrapper .entry-title').shuffleLetters();
                return false;
            }
        });
    }

    // I guess you are calling projectShow() somewhere in here
});

Answer 5

尝试使用此代码

 $(this).parent('.post-link').html('loading....');