javascript - 选择多个字母按钮时，它会替换文本输入

Question

我在下面有一个 jsfiddle 应用程序:

JSFIDDLE

如果您打开 jsfiddle，您将看到一个包含“回答”按钮的顶部控件。您还会看到一些字母按钮、一个“True”按钮和一个“False”按钮。

“True”和“False”按钮工作得很好，这意味着如果用户点击“True”然后点击“False”，它会替换文本输入，因为你不能同时回答“True”和“假”。

但是字母按钮有问题。如果你点击字母按钮，你会意识到你可以点击多个字母按钮，这很好，但问题是它替换了那些不正确的字母的文本输入。如果选择了多个字母按钮，那么它应该显示所有这些字母按钮的文本输入，而不是用最近选择的字母按钮替换文本输入。

那么有人知道我需要在代码中更改什么才能实现这一点吗？

Answer 1

您在此处为按钮生成一个data-hid:

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

基于此，您现在生成一个输入字段:

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

这里的id变量是按钮的id，例如answerC。因此，当您第一次单击该按钮时，您将隐藏 #hiddenanswerC0value。

但是，当您添加答案时，按钮将生成一个 id，如下所示:

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

所以最后会有一个额外的Row。所以 data-hid 和输入框也会不同 (#hiddenanswerCRow0value)。

编辑:另一个问题是您实际上并没有为新按钮创建数据隐藏。单击它们后，您只需为第一组按钮创建它。但是，当您创建第二组(单击后)且 C 按钮已激活时，它将不会设置 data-hid，因此您无法删除它。