es ersetzt eine Texteingabe, wenn mehrere Buchstaben-Tasten

Question

Ich habe eine jsfiddle Anwendung unter ausgewählt sind:

JSFIDDLE

Wenn Sie die jsfiddle öffnen, erhalten Sie eine Top-Steuerung sehen, die „Antwort“ Schaltflächen enthält. Sie sehen auch einige Buchstabentasten, eine "True" -Schaltfläche und eine "False" -Schaltfläche.

Die Schaltflächen "True" und "False" funktionieren einwandfrei. Wenn der Benutzer auf "True" klickt und dann auf "False" klickt, ersetzt er die Texteingabe, da Sie keine Antwort erhalten können "und" Falsch ".

Aber es gibt ein Problem mit den Buchstabentasten. Wenn Sie auf die Buchstabentasten klicken, erkennen Sie, dass Sie auf mehrere Buchstabentasten klicken können, das ist in Ordnung, aber das Problem ist, dass es die Texteingabe für diese Buchstaben ersetzt, die falsch ist. Wenn mehrere Buchstabentasten ausgewählt sind, sollten die Texteingaben für alle diese Buchstabentasten angezeigt werden und die Texteingabe nicht durch die zuletzt ausgewählte Buchstabentaste ersetzt werden.

Also weiß jemand, was ich im Code ändern muss, um dies zu erreichen?

Answer 1

Sie eine data-hid für die Schaltfläche erzeugen hier:

var hid = "hidden" + id + n + "value"; 
$(btn).attr("data-hid", hid); 

auf dieser Basis Sie jetzt ein Eingabefeld erzeugen:

var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />'; 

Die ID-Variable in dieser ist die ID der Schaltfläche, die wird zum Beispiel answerC sein. So erhalten Sie eine versteckte #hiddenanswerC0value, wenn Sie zuerst auf die Schaltfläche klicken.

jedoch, wenn Sie eine Antwort die Schaltflächen hinzufügen wird eine ID wie diese erzeugt haben:

.attr('id', $this.attr('id')+'Row'); 

So wird es eine zusätzliche am Ende haben. Also werden die data-hid und das Eingabefeld auch anders sein (#hiddenanswerCRow0value).

Bearbeiten: Ein weiteres Problem ist, dass Sie nicht tatsächlich die Daten verbergen für die neuen Schaltflächen erstellen. Sie erstellen es nur für die ersten Schaltflächen, nachdem Sie darauf geklickt haben. Aber wenn Sie den zweiten Satz (nach dem Klicken) mit der bereits aktivierten C-Taste erstellen, wird data-hid nicht gesetzt und Sie können ihn daher nicht löschen.

Answer 2

Es scheint nicht so, als würde die Eingabe-ID auf der ersten, mit der Sie Probleme haben, richtig eingestellt werden. Ich zeige es bekommt eine ID von "# hiddenanswerC0value" aber sollte "# hiddenanswerCRow0value" sein, wenn ich mich nicht irre. Ich werde ein bisschen mehr darüber nachdenken, aber das könnte genug sein, um es herauszufinden.