Question

我对“是”，“否”，“真实”和“假”按钮的测试输入不是很正确。您可以自己查看和测试here。请按照以下步骤操作：

点击“打开网格”并选择“真或假”按钮，出现“真”和“假”按钮。
点击“True”按钮，按钮将变为绿色，您将看到下面该按钮的文本输入。这很好。
现在点击“False”按钮，会出现“False”按钮打开并且“True”按钮关闭（返回白色）。现在好处是出现“False”文本输入，不好的是它不会删除“True”文本输入。

所以我的问题是，如果用户点击“True”或“False”或“Yes”或“No”的替代按钮，我想要刚刚关闭的按钮删除它的输入。

如何实现这一目标？

以下是添加和删除输入的功能：

      function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    var $btn = $(btn);
    var value = btn.value;
    var id = $btn.attr('id');

    var $otherYNBtn = value === "Yes" ? $(context.find("input[value='No']")) : $(context.find("input[value='Yes']"));
    var $otherTFBtn = value === "True" ? $(context.find("input[value='False']")) : $(context.find("input[value='True']"));


    if ($(context.find("input[value='Yes']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='No']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    if ($(context.find("input[value='True']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='False']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }


    if ($(btn).hasClass('answerBtnsOff')) {
        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";  
        $(btn).attr("data-hid", hid);

        // append those values to the form
        var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
        $('#QandA').append(input);      
        // toggle the button
        $btn.removeClass('answerBtnsOff').addClass('answerBtnsOn'); 
    // do the opposite - remove the input
    }
    else {
        $("#" + $(btn).attr("data-hid")).remove();
        $btn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }  


    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);

    return false;
}

下面是“真实”，“假”，“是”和“否”按钮：

 <table id="optionAndAnswer" class="optionAndAnswer">
    <tr>
    <tr class="answer">
    <td>3. Answer</td>
    <td>
    <table id="answerSection">
  <tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerName[True]"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[Yes]"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[No]"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
    </table>
    </td>
    </tr>
    </table>

Answer 1

以下是jsfiddle的解决方案：

http://jsfiddle.net/Bjqr6/12/

总的来说，你的方法不是最好的方法，但我没有时间从头开始。下一次，我会考虑将您的问题和答案放入类中，并只维护值的全局数组。这样生成Html代码将更容易与重要的实际值和属性分离。

Answer 2

我建议保留问题计数的计数器，以便每个选项和答案框都有一个ID，以便您可以在添加新的框之前从中删除任何现有的框。这也可以让你追溯更新它（在你添加第四个问题后设置第三个）

如何在切换按钮时删除文本输入？

2 个答案: