undefiniert, wenn sie versuchen addClass auf $ (this) Ankertag

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>

Ich versuche, eine Klasse "aktiv" zu verwenden, um hinzuzufügen, wenn ein Link geklickt wird:

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

function showImage(imageSrc) { 

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

} 

Wenn Ich warne $ (this) .attr ('class') es zeigt "undefined" an.

Warum kann ich das Anker-Tag nicht mit $ (this) targetieren?

Wie kann ich dem Link, auf den geklickt wird, die Klasse "active" hinzufügen?

Answer 1

$(this) bezieht sich auf das Window-Objekt und somit nicht das, was Sie erwarten. Sie können "this" an die Funktion innerhalb des integrierten JS-Aufrufs übergeben und ein jQuery-Element des Arguments erstellen. Sehen Sie das Snippet:

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

Wenn ein richtigen Event-Handler verwenden, können Sie speichern Ihre $image_src Variable z in einem data -Attribut.

$('.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

Da Sie keinen zusätzlichen Code nicht bereitstellt ist, weiß ich nicht, warum Sie eine Inline-Funktion in dem Anker-Tag verwenden. Da könnten Sie normalerweise tun:

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

    alert(className); 
})