使用jQuery设置DOM属性并通过Javascript返回'；未定义'；

这不是一个很好的问题标题，所以如果其他人在阅读后有更好的表达方式，那将不胜感激

别挡道，这是作业。本周的任务是重构我们已经存在的简单JS代码以使用JQM，我对转换有一个问题，我不太清楚，下面是代码：

function populateItemLinks(key, listItem)
{

    var ecLink = $('<a class="padRightRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Edit Character");
            ecLink.on("click", editCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));

        ecLink = $('<a class="padLeftRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Delete Character");
            ecLink.on("click", deleteCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));
};

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
            console.log(this.key);
        alert("Character was deleted.");
        localStorage.removeItem(this.key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

函数populateItemLinks（键，列表项）
{
var ecLink=$（''）；
ecLink.attr（“href”，“#”）；
ecLink.attr（“key”，key）；
html（“删除字符”）；
ecLink.on（“单击”，删除字符）；
ecLink.appendTo（列表项）；
console.log（ecLink.attr（“key”）；
};
函数deleteCharacter（）
{
var toDelete=confirm（“是否要删除此字符？”）；
如果（toDelete）
{
console.log（this.key）；
警告（“字符已删除”）；
localStorage.removietem（this.key）；
$.mobile.changePage（“主页”）；
}
其他的
{
警告（“未删除字符”）；
}
}

---

问题在于使用.key属性作为populateItemLinks函数中链接的标识。当使用javascript时，我只需要执行linkname.key=key；然后在deleteCharacter函数中使用“this.key”返回密钥。好的，现在它总是返回未定义，我想不出任何方法可以不费解地获得与非JQM版本相同的功能，因此任何帮助都将不胜感激。

您的代码返回未定义的原因是您试图读取DOM元素的属性，但您已经设置了DOM元素的属性

这个问题的主要答案解释了两者之间的区别：

如果要按如下方式设置新创建的DOM元素的属性：

ecLink.prop('key', 12355);

并继续直接访问DOM元素（而不是通过jQuery）：

一切都会好起来的。这里有一个更详细地展示了这一点

无论如何，我已经调整了您的代码以使用您正在设置的属性：

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");

    if (toDelete)
    {
        var key = $(this).attr('key');
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

综上所述，它们更适合针对DOM元素存储任意数据：

ecLink.data('key', myKey); // set
ecLink.data('key');        // get

---

我要做的是将单击的

ecLink

作为参数传递给

deleteCharacter（）

，如下所示：

ecLink.prop('key', 12355);

ecLink.on（“单击”，函数（）{deleteCharacter（$（this））；}）

然后可以修改
deleteCharacter（）
：

function deleteCharacter(el)
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
        var key = el.attr('key'); //get the key attribute
        console.log(key);
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}