在多个滑块元素上捕获鼠标悬停

Question

你想做什么？

我正在尝试在旋转木马滑块的每张幻灯片上跟踪鼠标悬停在工具提示上（旋转木马滑块的示例：here）。每张幻灯片都有3-5个可见的工具提示。当鼠标悬停工具提示时，会触发数据层事件。

每个工具提示都有相同的类变量且没有ID。代码更新以包含或删除工具提示行，具体取决于可见幻灯片。

示例HTML：幻灯片1

<div id="container">
<div class="tooltip" style="top: 140px; left: 260px;" tooltip="0"></div>
<div class="tooltip" style="top: 80px; left: 450px;" tooltip="1"></div>
<div class="tooltip" style="top: 200px; left: 730px;" tooltip="2"></div>
<div class="tooltip" style="top: 300px; left: 700px;" tooltip="3"></div>
<div class="tooltip" style="top: 550px; left: 840px;" tooltip="4"></div>
</div>

示例HTML：幻灯片2

<div id="container">
<div class="tooltip" style="top: 140px; left: 260px;" tooltip="0"></div>
<div class="tooltip" style="top: 80px; left: 450px;" tooltip="1"></div>
<div class="tooltip" style="top: 200px; left: 730px;" tooltip="2"></div>
</div>

您目前尝试执行此操作的代码是什么？

<script>

function hover(eClass) {
  var elem = document.getElementsByClassName(eClass);
  for (var i=0;i<elem.length;i++) {
    elem[i].addEventListener('mouseover', mouseOver);
  }
  function mouseOver() {
        dataLayer.push({
        'event':'elementHover'
    });

    var elem = null;
    var i = null;
  }
}  

hover("tooltip")

</script>

您对结果的期望是什么？

我希望datalayer事件可以在任何时候在旋转木马滑块上悬停工具提示时触发，无论它在哪个幻灯片上（第1，第2，第5）。我尝试在每次悬停后重置 elem var和 i var，以便脚本获得最新数量的幻灯片工具提示但我必须做错了。

实际结果是什么？

javascript代码可以在第一张幻灯片上触发工具提示鼠标悬停的事件。当我转到上一张或下一张幻灯片时，当鼠标悬停在工具提示上时，脚本不再触发事件。

Answer 1

解决方案是在每次幻灯片更改后应用事件侦听器（例如，在幻灯片更改时调用hover("tooltip")以确保事件侦听器在存在后应用于DOM元素）。