时间戳

首页 > 解决方案 > 悬停时获取数据属性值

javascript - 悬停时获取数据属性值

问题描述

我有几个链接。当我将鼠标悬停在链接上时，我想获取存储在数据属性中的值。我需要选择 t 值并将它们传递给函数

HTML

<a href="#" data-lat="23.333452" data-lon="-97.2234234">

JS

var loc = document.querySelectorAll("a[data-lat]");
                                
loc.addEventListener("mouseover", locOver);
loc.addEventListener("mouseout", locOut);

function locOver() {
   // do something
}

function locOut() {
   // do something else
}

自从我使用香草 JS 以来已经有一段时间了，这是漫长的一天，所以我确信它已经很接近了，但我被困住了。我不断得到：

未捕获的 TypeError：loc.addEventListener 不是函数

我在这里想念什么？

标签： javascript

解决方案

您需要遍历获得的节点document.querySelectorAll("a[data-lat]")以添加事件。

工作示例。

<a href="#" data-lat="23.333452" data-lon="-97.2234234">Node</a>
<script>
    var loc = document.querySelectorAll("a[data-lat]");

    loc.forEach(node => {
        node.addEventListener("mouseover", locOver);
        node.addEventListener("mouseout", locOut);
    })


    function locOver(event) {
        // do something
        console.log('mouseover', event.target.dataset)
    }

    function locOut() {
        // do something
        console.log('locOut')
    }
</script>

推荐阅读