$(this）.attr({class:“activeTab”}）;不起作用，因为这是未定义的

$(this).attr({class: "activeTab"}); is not working because this is undefined

本文关键字：不起作用 因为 未定义 activeTab attr this class      更新时间：2023-09-26

这是我的JS代码，我遇到的问题是标题中的问题。似乎$（this）正在返回undefined。：

function load() {
    $(".inactiveTab").attr("onclick", "clickInactiveTab()");
}
function clickInactiveTab() {
    $(this).attr("class", "activeTab");  
}

html如下：

<div class="inactiveTab">Tab 1</div>
<div class="inactiveTab">Tab 2</div>

这不是用jQuery:设置事件处理程序的方式

function load() {
  $(".inactiveTab").click(clickInactiveTab);
}

您的代码使得处理程序代码（"clickInactiveTab()"）将被解释为函数体。因为代码在没有任何显式上下文的情况下调用了实际的处理程序函数，所以this的值将是undefined或window（取决于您是否处于"严格"模式）。

在我看来，更好的做法是将处理程序设置为来自<body>:的委托处理程序

$("body").on("click", ".inactiveTab", clickInactiveTab);

使用纯JS

function load() {
    for(var i = 0; i< inactiveTabArray.length; i++){
       inactiveTabArray[i].classList.remove("activeTab")
    }
    this.classList.add("activeTab")
}
var inactiveTabArray = document.querySelectorAll(".inactiveTab");
for( var inactiveTab = 0; inactiveTab< inactiveTabArray.length; inactiveTab++){
     inactiveTabArray[inactiveTab].addEventListener("click", load, false)
}
.activeTab{color: red}
<div class="inactiveTab">Tab 1</div>
<div class="inactiveTab">Tab 2</div>

相关文章：