Question

在下面的代码中，

<!DOCTYPE html>
<html>
    <head>
        <title>Hide odd rows</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div style="background-color:#8F9779;width:200px;height:30px;">
        </div>
        <hr style="width:200px" align="left">
        <table border="1" >
            <tr class="hide" >
                <td width="40" height="20">row 1</td>
            </tr>
            <tr>
                <td width="40" height="20">row 2</td>
            </tr>
            <tr class="hide">
                <td width="40" height="20">row 3</td>
            </tr>
            <tr>
                <td width="40" height="20">row 4</td>
            </tr>
            <tr class="hide">
                <td width="40" height="20">row 5</td>
            </tr>
        </table><br>
        <button type="button" name="HideRows">Hide Odd Rows</button>
        <script type="text/javascript" src="hideOddRows.js"></script>
    </body>
</html>

/* hideOddRows.js */
document.querySelector('[name=HideRows]').onclick = hideRows;

function hideRows(){
    var elements = document.getElementsByClassName('hide');
    elements.forEach(function(element){
        element.style.visibility = "hidden";
    });
    return true;
}

根据调试，每个element elements数组的回调函数不会在点击事件上执行。

我认为elements是关键字集合，如下所示。

-

如何解决此错误？

Answer 1

forEach未包含在HTMLCollection返回的类数组getElementsByClassName对象的原型中。

HTMLCollection实例类似于数组，因为您可以按索引访问元素，但它不包括数组的所有方法，正如您在forEach中发现的那样。

然而，您可以通过访问Array原型中的方法来手动调用对象上的方法。

var elements = document.getElementsByClassName('hide');
Array.prototype.forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

Answer 2

forEach方法适用于数组。它不起作用，因为.getElementsByClassName()返回HTMLCollection。

要解决此问题，请使用：

var elements = document.getElementsByClassName('hide');
Array.prototype.forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

或更短：

var elements = document.getElementsByClassName('hide');
[].forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

Answer 3

您可以将elements转换为数组，然后调用forEach（）。

 var elements = document.getElementsByClassName('hide');
 elements = Array.prototype.slice.call(elements,0);
    elements.forEach(function(element){
        element.style.visibility = "hidden";
    });

小提琴：https://jsfiddle.net/assx7hmh/

Answer 4

根据您的代码，这是我的解决方案：

function hideRows(){
  var elements = document.getElementsByClassName('hide');
  for(var key in elements) {
    if(elements.hasOwnProperty(key))
      elements[key].style.visibility = "hidden";
  }
  return true;
}

你只需要遍历对象，因为forEach只接受数组。

forEach回调不会使用getElementsByClassName执行

4 个答案: