使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;

你可以得到与造型很多发烧友，如果你想。