0

这个问题的标题不是那么好，所以如果其他人在阅读后有更好的措辞方式，那将不胜感激。

不碍事的披露，这是功课。本周的任务是重构我们已经存在的纯 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.");
    }
}

问题是使用 .key 属性作为 populateItemLinks 函数中链接的标识。当它是 strait javascript 时，我可以做 linkname.key = key; 然后使用“this.key”在 deleteCharacter 函数中取回密钥。好吧，现在它总是返回 undefined ，我想不出任何方式不会复杂地获得与非 JQM 版本相同的功能，所以任何帮助将不胜感激。

4

2 回答 2

1

您的代码返回 undefined 的原因是您正在尝试读取DOM 元素的属性，但您已经设置了DOM 元素的属性。

这个问题的最佳答案解释了两者之间的区别：.prop() 与 .attr()

如果您要像这样设置新创建的 DOM 元素的属性：

ecLink.prop('key', 12355);

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

this.key; // 123455

一切都会好的。这是一个JSFiddle 示例，更详细地显示了这一点。

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

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.");
    }
}

说了这么多，Data 属性更适合存储针对 DOM 元素的任意数据：

ecLink.data('key', myKey); // set
ecLink.data('key');        // get
于 2012-10-25T03:26:57.110 回答
0

我要做的是将点击ecLink作为参数传递给deleteCharacter()这样的：

ecLink.on("click",function() { 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.");
    }
}
于 2012-10-25T03:28:08.437 回答