LIの1つのセクションを編集可能にする最良の方法

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;

あなたが望んだ場合は、スタイリングとかなり手の込んだ得ることができる：それを説明するために簡略化した例。