使LI的一個部分可編輯的最佳方式

Question

使JUST card.price可編輯的最佳方式是什麼？我用幾種不同的方式解決了這個問題，這些方式看起來很愚蠢，但卻不能產生正確的結果。有沒有人有一些建議？

html += "<li class='list-item ui-state-default' id=" + i + ">" + 
    card.card_name + ' - ' + card.price + 
    "<button class='removeThis'>" + 
    "X" + "</button>" + "</li>"; 

Answer 1

這裏有一個簡單的方法來做到這一點與input元素。簡單的例子來說明吧：

var card = {}; 
 
    card.card_name = "Card Name"; 
 
    card.price = "4.00"; 
 

 
var inputBeg = "<input size=8 style='border: none;' value='$"; 
 
var inputEnd = "'>"; 
 
var html = ""; 
 

 
for (var i = 0; i < 3; i++) { 
 
    html += "<li class='list-item ui-state-default' id=" + i + ">" + 
 
    card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" + 
 
    "X" + "</button>" + "</li>"; 
 
} 
 

 
document.body.innerHTML = html;

你可以得到與造型很多發燒友，如果你想。