forEach回调不会使用getElementsByClassName执行
ove*_*nge 5 html javascript css
在下面的代码中,
<!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是键控集合,如下所示..
-
如何解决此错误？
forEach不包含在HTMLCollection返回的类数组对象的原型中getElementsByClassName.
一个HTMLCollection实例是阵列状,在您可以通过索引访问元素,但它不包括所有的阵列的方法,因为你有发现forEach.
但是,您可以通过从Array原型访问方法来手动调用对象上的方法.
var elements = document.getElementsByClassName('hide');
Array.prototype.forEach.call(elements, function(element){
element.style.visibility = "hidden";
});
| 归档时间： |
|
| 查看次数： |
1185 次 |
| 最近记录： |