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>

使用Alexander的解决方案，＆＃34; loading ...＆＃34;文字显示如下：

<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>');

因为this中的beforeSend未引用元素

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

Answer 3

在支持ES5（IE＆gt; = 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....');

定位用户点击的特定链接

5 个答案: