javascript - 在更新元素的类名时，为什么需要“this”关键字？

Question

我指的是例子

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

在此将活动类替换为 nil，current[0].className如下所示

current[0].className = current[0].className.replace(" active", "");

但是要添加类名，this使用关键字

this.className += " active";

为什么我不能添加新的类名如下

current[0].className += " active"; ?

标签： javascript

Answer 1

因为this在您当前的上下文中是单击的按钮。另一种方法是使用e.target.classList.add('active');，但在这样做之前，您应该e像这样传递给回调函数参数

  btns[i].addEventListener("click", function(e) {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    e.target.classList.add('active');
  });