Question

我想在我的菜单中为某些链接添加事件监听器，参数i在两种情况下都传递为2，但应该是0和1。似乎无法在这里找到问题。

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      setMode(i);
    });
  }
}

  <li class="dropdown" id="modus">
    <a href="#">Modus</a>
    <div class="dropdown-content">
      <a href="#" class="mode radio">ExRaid</a>
      <a href="#" class="mode radio">Trigger</a>
    </div>
  </li>

Answer 1

使用unset TERM循环声明i以创建for的块范围。

i

for (let i = 0; i < elements.length; i++) {

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      setMode(i);
    });
  }
}

clickAdd();

OR：您可以使用IIFE（立即调用函数表达式）：

<li class="dropdown" id="modus">
  <a href="#">Modus</a>
  <div class="dropdown-content">
    <a href="#" class="mode radio" >ExRaid</a>
    <a href="#" class="mode radio" >Trigger</a>
  </div>
</li>

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (var i = 0; i < elements.length; i++) {
    (function(j) {
     elements[j].addEventListener('click',function() {
          setMode(j);
     });
    })(i);
  }
}

clickAdd();

addEventListener传递错误的参数

1 个答案: