javascript - 仅使用 javascript(无 jquery)在鼠标悬停时获取 html 的 id

Question

我的问题是，如果我有一个看起来像...的 Text html 元素

<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>

我能否在鼠标悬停事件中检索 id(在本例中为 1)，以便我可以在 javascript 中使用它来执行其他操作。

不确定我是否能做到这一点，但我希望我能做到。我所拥有的是一些从 xml 文档中获取数据的 javascript 代码。我有一个包含 500 多张卡片的列表，我已经解析并按经常使用的类别存储了这些卡片。以下是适用于我的问题的相关功能。

var Card = function Card(cardName, subTitle, set, number, rarity, promo, node)
{
    this.cardName = cardName;
    this.subTitle = subTitle;
    this.set = set;
    this.number = number;
    this.rarity = rarity;
    this.promo = promo;
    this.node = node;
}

其中节点是卡片列表中的位置，并且由于我开始使用的文档的格式包含按名称字母顺序排列的每张卡片，而不是在集合中按逻辑编号。

Card.prototype.toLink = function()
{
    var txt = "";
    this.number;
    if (this.promo == 'false')
    {
    var image = this.set.replace(/ /g, "_") + '/' + this.number;
    txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>";
    txt += this.toString() + "</" + "a>";
    }
    else 
    {
    var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
    var txt = "";
    txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ')>";
    txt += this.toString() + "</a>";
    }
    return txt; 
}

这是我用来填充卡片列表的内容，其中的名称在悬停时会显示卡片图像。

function populateList () {
    for (i = 0; i<cards.length; i++)
    document.getElementById('myList').innerHTML += '<li>'+cards[i].toLink()+</li>;
}

我正在尝试做的是使用 onmouseover 事件检索元素的 ID，以便我可以检索未保存到值的所有内容。 我意识到我可以将 id 作为 changeImage 函数的一部分作为临时解决方法传递，尽管它涉及重写我的 toLink 函数和我的 changeImage 函数以包含第二个参数。作为一个已婚男人，我已经有足够的论据了，每张卡片可以少一个。

总而言之，我想我需要问的就是这个，但是有没有一种方法只使用 javascript 和 html 来检索元素的 id，onmouseover，以便我可以在函数中使用它。如果您已经阅读了我的文字和代码墙，我会提前感谢您，如果您对我的问题有任何见解，我将不胜感激。

Answer 1

if I have an Text html element that looks like...

<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>

Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.

是的，如果您可以更改链接(看起来您可以):

<a id='1' onmouseover="changeImage('setname/setnumber', this)">Cardname</a>

注意新参数 this .内 changeImage ，你会得到 id像这样:

function changeImage(foo, element) {
    var id = element.id;
    // ...
}

查看您的代码，您将更新 toLink 的这一行:

txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', this)>";

当然，你也可以把id直接输入:

txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', " + this.node + ")>";

然后 changeImage会是:

function changeImage(foo, id) {
    // ...
}

我没有在它周围使用引号，因为这些 ID 看起来像数字。但如果它不是可靠的数字，请使用引号:

txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', '" + this.node + "')>";