Неопределенное при попытке использовать addClass на $ (это) якорь тег

Question

function showImage(imageSrc) { 
 
      
 
      $('a.slideTabLinkBlock').removeClass('active'); 
 
      alert($(this).attr('class')); 
 
      $(this).addClass('active'); 
 

 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="slideTabLinkBlock" onclick="showImage('<?php echo $image_src; ?>');">Link</a>

Я пытаюсь добавить класс «активный», когда нажата ссылка:

<a class="slideTabLinkBlock" onclick="showImage('<?php echo $image_src; ?>');"></a> 

function showImage(imageSrc) { 

    $('a.slideTabLinkBlock').removeClass('active'); 
    alert($(this).attr('class')); 
    $(this).addClass('active'); 

} 

Когда Я предупреждаю $ (this) .attr ('class'), он отображает «undefined».

Почему я не могу настроить привязку тега привязки с помощью $ (this)?

Как добавить «активный» класс к указанной ссылке?

Answer 1

$(this) ссылается на объект Window и, следовательно, не на то, что вы ожидаете. Вы можете передать «это» функции внутри встроенного вызова JS и создать элемент jQuery аргумента. Смотрите фрагмент кода:

function showImage(element, imageSrc) { 
 

 
      $('a.slideTabLinkBlock').removeClass('active'); 
 
      alert($(element).attr('class')); 
 
      $(element).addClass('active'); 
 

 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="slideTabLinkBlock" onclick="showImage(this, '<?php echo $image_src; ?>');">Link</a>

Answer 2

При использовании надлежащего обработчик событий вы можете хранить ваши $image_src переменной, например, в атрибуте data.

$('.slideTabLinkBlock').on('click', function() { 
 

 
    var $this = $(this), 
 
    imgSrc = $this.data('imgsrc'); 
 

 
    $('a.slideTabLinkBlock').removeClass('active'); 
 
    $this.addClass('active'); 
 
    alert($(this).attr('class')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="slideTabLinkBlock" data-imgsrc="<?php echo $image_src; ?>">Link</a>

Answer 3

Потому что вы не предоставления какой-либо дополнительный код, я не знаю, почему вы используете функцию встроенного в тега привязки. Потому что вы могли бы сделать это, как правило:

$('a.slideTabLinkBlock').on('click',function(){ 
    var className = $(this).attr('class'); 

    alert(className); 
})