尝试在 $(this) 锚标记上使用 addClass 时未定义答案

【问题标题】：Undefined when trying to use addClass on $(this) anchor tag尝试在 $(this) 锚标记上使用 addClass 时未定义
【发布时间】：2017-02-06 22:33:56
【问题描述】：

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') 时，它显示“未定义”。

为什么我无法使用 $(this) 定位锚标记？

如何将“活动”类添加到被点击的链接中？

【问题讨论】：

因为您使用内联事件处理程序 (onclick="") 而不是正确执行。
嗯，链接在循环内，我正在传递从循环内获得的 image_src 变量值
投反对票？提出一个解释清楚的问题。

标签： jquery addclass attr prop

【解决方案1】：

使用适当的事件处理程序时，您可以存储 $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>

【讨论】：

【解决方案2】：

因为你没有提供任何额外的代码，我不知道你为什么在锚标记中使用内联函数。因为你通常可以这样做：

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

    alert(className);
})

【讨论】：

【解决方案3】：

$(this) 指的是 Window 对象，因此不是您所期望的。您可以将“this”传递给内联 JS 调用中的函数，并创建参数的 jQuery 元素。见sn-p：

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>

【讨论】：

为什么对这个问题和这个答案投了反对票？这是一个明确的问题。而这个答案正在做@alwayslearning 想做的事情。