当选择多个字母按钮时,它会替换文本输入

Question

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

的jsfiddle

如果你打开jsfiddle,你会看到一个顶部控件,其中包含"Answer"按钮.您还会看到一些字母按钮,一个"True"按钮和一个"False"按钮.

"True"和"False"按钮工作正常,这意味着如果用户单击"True"然后单击"False",它将替换文本输入,因为您无法同时回答"True"和"False" ".

但是字母按钮有问题.如果单击字母按钮,您会发现可以单击多个字母按钮,这很好,但问题是它替换了那些不正确的字母的文本输入.如果选择了多个字母按钮,则它应显示所有这些字母按钮的文本输入,而不是用选择的最新字母按钮替换文本输入.

那么有谁知道我需要在代码中更改以实现此目的？

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集合，因此您无法删除它。