调用具有多个数组参数的函数

debugcn 发表于 Dev

cpu_figther

有一个 HTML 锚点列表，我需要添加事件侦听器，据我所知，当我将其作为参数提及时，它不会接收数组。

作为尝试，我没有使用额外的函数，而是使用自调用，但这种方式i在调试时甚至没有被监听。

for (var i=0; i < anc.length; i++) {
    anc[i].addEventListener('mouseover', function(i,pop,tri) {
       console.log('i=%i', i);    // last value of loop
       pop[i].style.display = 'initial';
       tri[i].style.animation='anim_dpt_tr 0.4s ease-out forwards';
    });
    ...
}

更有用的代码

var pop = document.querySelectorAll('#cities > li > a > .popup');
const anc = document.querySelectorAll('#cities > li > a');
var tri = document.getElementsByClassName('triangle-left');

for (var i=0; i < anc.length; i++) {
    anc[i].addEventListener('mouseover', over(i, tri, pop));
    anc[i].addEventListener('touchmove', over(i, tri, pop));
    anc[i].addEventListener('touchend', out(i, tri, pop));
    anc[i].addEventListener('mouseout', out(i, tri, pop));
}

function over(i,tri,pop) {
    console.log("over_address=%i", pop[i]); // =0
    pop[i].style.display = 'initial';
    tri[i].style.animation='anim_dpt_tr 0.4s ease-out forwards';
}
function out(i,tri,pop) {
    console.log("out_i=%i", i);             // =each index
    pop[i].style.display = 'none';
    tri[i].style.animation='anim_dpt_tr_back 0.3s ease-in forwards';
}

这里是 HTML 树

<ul id="cities">
  <li>
    <a href="">Shoulder
      <span class="triangle-left"></span> <span class="popup">Arm</span> </a>
  </li>
...

如何将数组正确传递给事件处理程序？

brk

此行将anc[i].addEventListener('anyEvent', over(i, tri, pop))尝试立即调用该函数。相反，您可以创建一个回调函数并从中调用over& out。也不是传递多个参数，而是使用this. 这里this将指的是触发事件的元素，anchor tag在这种情况下是。

然后在over/out函数内部使用elem.querySelector('.popup')它将以popup触发事件的元素内的类为目标的元素。然后你可以添加样式属性

const anc = document.querySelectorAll('#cities > li > a');
for (var i = 0; i < anc.length; i++) {
  anc[i].addEventListener('mouseover', function() {
    over(this)
  });

  anc[i].addEventListener('mouseout', function() {
    out(this)
  });
}

function over(elem) {
  elem.querySelector('.popup').style.display = 'initial';
  elem.querySelector('.triangle-left').style.animation = 'anim_dpt_tr 0.4s ease-out forwards';
}

function out(elem) {
  elem.querySelector('.popup').style.display = 'none';
  elem.querySelector('.triangle-left').style.animation = 'anim_dpt_tr_back 0.3s ease-in forwards';
}

<ul id="cities">
  <li>
    <a href="">Shoulder
      <span class="triangle-left"></span> <span class="popup">Arm</span> </a>
  </li>
  <li>
    <a href="">Shoulder
      <span class="triangle-left"></span> <span class="popup">Leg</span> </a>
  </li>
  <li>
    <a href="">Shoulder
      <span class="triangle-left"></span> <span class="popup">ercerc</span> </a>
  </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。