使用jQuery设置DOM属性并通过Javascript返回'undefined'

这不是一个伟大的问题的标题，所以如果任何人有更好的方式来阅读它后，它的话，这将不胜感激。使用jQuery设置DOM属性并通过Javascript返回'undefined'

泄露的方式，这是作业。这周的任务是重构我国现有的纯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函数中。那么，现在它总是返回未定义的，我想不出任何不会令人费解的方式来获得与非JQM版本相同的功能，所以任何帮助将不胜感激。

来源

2012-10-25 Tarkenfire

你的代码返回undefined的原因是，你想读的DOM元素的财产，但你已经设置的DOM元素的属性。

对这个问题的顶部答案解释之间的不同之二：.prop() vs .attr()

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

ecLink.prop('key', 12355);

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

this.key; // 123455

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

不管怎样，我已经调整你的代码与属性工作你设置：

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 attributes更适合用于存储对DOM元素的任意数据：

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

来源

2012-10-25 03:26:57

我会做的是通过点击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-25 03:28:08

使用jQuery设置DOM属性并通过Javascript返回'undefined'

回答

相关问题