javascript - 使用 JavaScript/jQuery 在鼠标悬停时显示元素的 ID

Question

我一直在想办法解决这个问题，但我还没有。

我正在用 anchor 标记的 html 构建列，我想知道鼠标悬停在上面的标记的 ID。

这应该很简单，但好像我碰壁了，我看不出如何解决这个问题。

我遇到的问题是控制台上显示的 id 始终是数组的最后一个 id。而不是我想要特定 anchor 的 ID。

非常欢迎任何建议。

这是我的代码:

//Anchor builder
var numberOf = flatParamDateArray.length;

for (i = 0; i < numberOf; i++) {
    var param2Slider = document.createElement("a");
    param2Slider.id = 'sliderAnchor' + i;
    sliderAnchorId = param2Slider.id;
    param2Slider.name = 'param2Slider';
    param2Slider.className = 'nav2Slider a';
    document.getElementById('nav2Slider').appendChild(param2Slider);
    $('.nav2Slider a').onmouseover = function () {
        console.log('flatParamDateArray index: ' + param2Slider.id);
    }
}

Answer 1

1.将此移出，并在 for 循环:

$('.nav2Slider a').onmouseover = function () {
    console.log('flatParamDateArray index: '+param2Slider.id);
}

2. 将 onmouseover() 更改为 mouseover():

$('.nav2Slider a').mouseover(function() {
    console.log('flatParamDateArray index: '+param2Slider.id);
});

3.要获取 ID，这是您需要的代码:

    console.log('flatParamDateArray index: '+ $(this).prop('id'));

奖励:

由于您是动态添加链接，因此您应该使用 .on()函数，将事件处理程序的数量减少到一个(而不是每个元素一个):

$('.nav2Slider').on('mouseover', 'a', function() {
    console.log('flatParamDateArray index: '+ $(this).prop('id'));
});