Ориентация на конкретную ссылку, которую пользователь нажимает

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

, потому что 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> = 9), вы можете просто использовать .bind(this), чтобы получить контекст.

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

Answer 4

Попробуйте с этим кодом

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

Answer 5

Вы, возможно, усложненной это немного. Зачем это делать в 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 
});