定位用户点击的特定链接

Question

我的页面充满了不同的链接，每个链接都有一个.post-link类。

在下面的函数中，我想要行$(this).html('loading...'); 定位所点击的特定.post-link div。 我将如何实现这一目标？ 我觉得我应该创建某种变量，但我有点迷茫。 任何帮助，将不胜感激。

$('.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;
            }
        });
    }

编辑

这是我的HTML设置方式：

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

使用亚历山大的解决方案，“正在加载...”文本显示如下：

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

有没有办法让它像这样显示？

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

当然，如果我将文本包装在span标签中？

更新

$('.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

采用

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

要么

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

因为beforeSend中的this不涉及元素

Answer 2

您可以尝试类似：

$('.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;
        }
    });
}

尽管只要您不覆盖/重新声明e Alexander的答案就会更好。

Answer 3

在支持ES5（IE> = 9）的浏览器中，您可以简单地使用.bind(this)获取上下文。

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

Answer 4

您可能有点复杂。 为什么要在beforeSend ？ 像这样做：

$('.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....');