Question

我有HTML代码：

<ul class="nav" id="topNav">
<li><a href="">Menu 1</a></li>
<li><a href="" class="dropdown">Menu 2 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 2.1</a></li>
    <li><a href="">Menu 2.2</a></li>
    <li><a href="">Menu 2.3</a></li>
  </ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="" class="dropdown">Menu 5 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 5.1</a></li>
    <li><a href="" class="dropdown">Menu 5.2 &raquo;</a>
      <ul class="sub-menu">
        <li><a href="">Menu 5.2.1</a></li>
        <li><a href="">Menu 5.2.2</a></li>
        <li><a href="">Menu 5.2.3</a></li>
      </ul>
    </li>
  </ul>
</li>
<li class="icon">
  <a href="javascript:void(0);" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>

我想用class =＆＃34; dropdown＆＃34;来获取所有元素。添加onclick（）属性，如下所示：

<script type="text/javascript">    
var y = [];
y = document.getElementsByClassName('dropdown');
var att = document.createAttribute('onclick');
att.value = 'openChild(this)';
var i;
for (i=0; i < y.length; ++i){
  document.getElementsByClassName('dropdown')[i].setAttributeNode(att);
  var att1 = document.createAttribute('href');
  att1.value = 'javascript:void(0)';
  document.getElementsByClassName('dropdown')[i].setAttributeNode(att1);
}

}
</script>

但是，只能执行第一个元素：

<li><a href="" class="dropdown">Menu 2 &nabla;</a>

以下元素不会添加onclick（）。

Answer 1

不要将要从HTML解析为JS的属性字符串分配 - 这与eval一样糟糕。使用Javascript正确分配处理程序。

您可以使用querySelectorAll和forEach直接进行迭代（通过NodeList），无需for循环或一遍又一遍地选择集合。

您还需要preventDefault event以阻止替换该网页，因为相关元素为a s：

function openChild(e) {
  e.preventDefault();
  console.log('opening ' + e.target.textContent);
}
document.querySelectorAll('.dropdown')
  .forEach(dropdown => dropdown.addEventListener('click', openChild));

<ul class="nav" id="topNav">
<li><a href="">Menu 1</a></li>
<li><a href="" class="dropdown">Menu 2 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 2.1</a></li>
    <li><a href="">Menu 2.2</a></li>
    <li><a href="">Menu 2.3</a></li>
  </ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="" class="dropdown">Menu 5 &nabla;</a>
  <ul class="sub-menu">
    <li><a href="">Menu 5.1</a></li>
    <li><a href="" class="dropdown">Menu 5.2 &raquo;</a>
      <ul class="sub-menu">
        <li><a href="">Menu 5.2.1</a></li>
        <li><a href="">Menu 5.2.2</a></li>
        <li><a href="">Menu 5.2.3</a></li>
      </ul>
    </li>
  </ul>
</li>

请注意，NodeList.forEach有点新 - 如果您不使用polyfill，那么如果您想支持古代浏览器，请改为使用Array方法call：

Array.prototype.forEach.call(
  document.querySelectorAll('.dropdown'),
  dropdown => dropdown.addEventListener('click', openChild)
);

javascript

1 个答案: