Question

我对编码非常陌生。以下是我正在努力理解的一段JS代码：

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsbyClassName(“btn”);
for (var i = 0; i < btns.length; i++){
btns.addEventListener(“click”, function(){
var current = document.getElementsbyClassName(“active”);
current[0].className = current[0].className.replace(‘active’, “”);
 this.className += ‘active’;
});}

[i]的作用是什么

btns [i] .AddEventListener ？？

这到底是什么？如果括号之间没有“ i”，该怎么办？也是电流[0]。这可能是一个愚蠢的问题，但请帮助我理解。

Answer 1

正如方法getElementsByClassName所建议的那样，它查询DOM并返回一个类似object的数组，其中包含多个具有指定类名的元素。

btns-将是一个包含一个或多个元素的数组。

要访问数组中的特定元素，请使用当前迭代的索引对其进行访问。

btns[1]-使您可以访问列表中的第二个元素。

addEventListener-用于将事件处理程序绑定到单个元素。您不能直接在对象数组上使用它。

// query the DOM for element with id - linkcontainer
var btnContainer = document.getElementbyId(“linkcontainer”);
// query the DOM for elements with className - btn
// This can return multiple elements, so btns will be 
// as array like object of elements
var btns = btnContainer.getElementsByClassName(“btn”);

// iterate over the array that was just queried for
for (var i = 0; i < btns.length; i++) {

  // bind a click event for each element in the array
  btns[i].addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    // access the first element and replace the active class 
    current[0].className = current[0].className.replace(‘active’, “”);

    // add the active class to the element that was clicked
    this.className += ‘active’;
  });
}

按照我的看法，您将必须删除所有元素的active类，而不仅仅是第一个实体。改进此代码的一种更好的方法是

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsByClassName(“btn”);

btns.forEach(function(btn) {
  btn.addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    current.forEach(function(elem) {
      elem.classList.remove('active');
    });

    this.classList.add('active');
  });
});

Answer 2

首先，没有愚蠢的问题，只有愚蠢的答案。

在您的代码中，您将获得一个存储在名为“ btns”的数组中的DOM元素列表，然后使用循环对其进行迭代。

因此btns[i]允许您检索i位置的元素（请注意，数组在Javascript中从0开始）。

示例：

var fruits = ['Apple', 'Banana'];

console.log(fruits[0])
console.log(fruits[1])

因此，如果您不使用[i]，则会在数组本身而不是存储在其中的元素上进行迭代。

Answer 3

正如其他张贴者所提到的那样，您的代码var btns = btnContainer.getElementsbyClassName(“btn”);应该返回DOM元素数组，因此在您的for循环中，btns[i]将在btns的索引i处检索特定元素，如下所示：我从0转到btns.length。删除i将在每次迭代中检索整个数组。

第二个问题：current与btns完全相同，它是一个DOM元素数组，因此current[0]将检索此数组中的第一个元素。

[variable] .JavaScript中的AddEventListener？

3 个答案: