Question

这是我的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>

Answer 1

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

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

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

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

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

Answer 2

使用纯JS

＆＃13;

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)
}

＆＃13;

.activeTab{color: red}

＆＃13;

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

＆＃13;

$（this）.attr（{class：＆＃34; activeTab＆＃34;}）;没有用，因为这是未定义的

2 个答案: