使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元素执行此操作的简单方法。简化示例来说明它：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

＆＃13;

如果您愿意，可以使用造型更加精彩。