Question

我是新手（也是JavaScript新手），请原谅我的超级基本问题。我有一个包含不同图像的HTML页面，它们共享一个类。通过使用getElementsByClassName，我得到一个数组。我想使用.map（）函数为数组中的每个单元格添加一个事件监听器。

这就是我所拥有的：

window.onload = function(){
var allImgs = document.getElementsByClassName("pft");

var newImgs = allImgs.map(
        function(arrayCell){
            return arrayCell.addEventListener("mouseover, functionName");
        }
    );
};

这会一直显示错误＆＃34; allImgs.map不是函数＆＃34;即使我将内部函数更改为不包含事件侦听器的内容。

我有这个代码的另一个版本，我只是循环遍历window.onload中的数组单元格，并以这种方式向它们中的每一个添加事件监听器并且它可以工作。为什么.map（）函数不起作用？它可以在window.onload中使用吗？

Answer 1

getElementsByClassName()会返回HTMLCollection而不是Array。您必须先将其转换为JavaScript数组：

allImgs = Array.prototype.slice.call(allImgs);
// or
allImgs = [].slice.call(allImgs);
// or
allImgs = Array.from(allImgs);

Answer 2

通过使用getElementsByClassName，我得到一个数组。

不，你不是。

你得到一个实时 HTMLCollection 。这是类似数组但不是数组。

由于它足够类似于数组，因此您可以应用真实数组中的map方法。

＆＃13;

    var text_content = [].map.call(
      document.getElementsByClassName("sdf"),
      function (currentValue, index, collection) {
        return currentValue.innerHTML;
      }
    );
    console.log(text_content);

＆＃13;

  <p class="sdf">foo</p>
  <p class="sdf"></p>
  <p class="sdf">bar</p>
  <p class="sdf"></p>
  <p class="sdf"></p>

＆＃13;

Answer 3

另一种选择是直接使用map：

[].map.call(allImages, function() { ... });

但是，使用Array.prototype.forEach可以更好地实现您的目标。

Answer 4

紧凑语法：

[...document.getElementsByClassName("pft")].map(arrayCell => arrayCell.addEventListener("mouseover", "functionName"))

Answer 5

var elms = document.querySelectorAll('.demo');
for(var i = 0; i < elms.length; i++) {
  var elm = elms[i];
  elm.onmouseleave = function() {
    this.style.color = "#000";
  }
  elm.onmouseover = function() {
    this.style.color = 'red';
  }
  
  
}

.demo {
  cursor:pointer;
}

<div>
  <p class="demo">paragraph one</p>
  <p class="demo">paragraph two</p>
  <p class="demo">paragraph three</p>
  <p class="demo">paragraph four</p>
  <p class="demo">paragraph five</p>
  <p class="demo">paragraph six</p>
</div>

Javascript .map（）不是一个函数

5 个答案: