$(this).attr({class: "activeTab"});不工作，因为这是未定义的

Question

这是我的JS代码，我遇到的问题就是标题中的问题。似乎 $(this) 返回未定义。:

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>

Answer 1

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

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

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

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

的委托处理程序

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

Answer 2

使用纯 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>

$(this).attr({class: "activeTab"});不工作，因为这是未定义的

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

html

javascript

css

jquery

web