使用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'

回答

相關問題