Beste Möglichkeit, einen Abschnitt eines LI editierbar zu machen

Question

Was ist der beste Weg, um JUST card.price editierbar zu machen? Ich habe mit verschiedenen Methoden herumgepfuscht, die dumm einfach zu sein scheinen, aber es bringt einfach nicht die richtigen Ergebnisse. Hat jemand da draußen irgendwelche Vorschläge?

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

Answer 1

Hier ist eine einfache Art und Weise, mit input Elementen zu tun. Vereinfachtes Beispiel illustrieren es:

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;

Sie könnten viel schicker mit dem Styling, wenn man es wollte.