我的页面充满了不同的链接,每个链接都有一个.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();
    }
});

最佳答案

采用

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


要么

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


因为this中的beforeSend不引用元素

关于javascript - 定位用户点击的特定链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27904647/

10-12 12:51
查看更多