你想做什么?

我试图跟踪鼠标悬停在旋转木马滑块(旋转木马滑块示例: here

每个工具提示都有相同的类变量,没有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>

你期望结果是什么?

我希望数据层事件在工具提示悬停在旋转木马滑块上时触发,无论它在哪一个幻灯片上(第1、第2、第5)。我尝试重置 元素 var和 每次悬停后,脚本都会获得最新数量的幻灯片工具提示,但我一定是做错了。

实际结果是什么?

javascript代码工作并为鼠标悬停在 仅第一张幻灯片 . 当我转到上一张或下一张幻灯片时,当我将鼠标悬停在工具提示上时,脚本不再触发事件。