Проблема с переменной jQuery

Question

Я пытаюсь загрузить некоторый контент с помощью функции .load (), вот мой код.

$(window).load(function() {

    $('.spotlight').append('<div class="caption"></div>');
    $('.spotlight .caption').hover(function () { 
         $(this).animate({ top : '-=50px' }, 150)}, function () {
         $(this).animate({ top : '+=50px' }, 150)}
    );

    $('.caption').load($(this).parent().data('who')+'.html');

});

, но в HTML у меня есть

<div class="spotlight" who="student">
      <img src="sga_small.jpg" />
</div>


<div class="spotlight" who="staff">
    <img src="sga_small.jpg" />
</div>

Но этопытается загрузить в undefined.html.Как мне исправить это?Вот ссылка на страницу http://www.coralspringshigh.org/demo/

Answer 1

Сначала подумал, что вы должны использовать data-who="student" вместо who, таким образом, вы можете использовать $(this).parent().data('who')+'.html'

Теперь, когда вы обновили, чтобы включить больше кода, недостатокболее очевидно.this в этом контексте на самом деле window, потому что вы находитесь внутри обработчика $(window).load().Попробуйте сделать что-то вроде этого:

// fires on document ready, not quite window load, but better:
$(function() {
  $('.spotlight').each(function() {
    var spot = $( this ),
        caption = $("<div class='caption'></div>").appendTo(spot);

    caption.load( spot.data('who') + '.html' );
    spot.hover(function() {
      caption.animate({ top : '-=50px' }, 150)
    }, function () {
      caption.animate({ top : '+=50px' }, 150)
    });
  });
});

Answer 2

Попробуйте это:

$('.caption').each(function() {
                       $(this).load($(this).parent().attr('who') + '.html');
                   });

Answer 3

Скорее всего, это возвращается неопределенным:

$(this).parent().attr('who')

Убедитесь, что у этого родителя есть значение в атрибуте who.