1

我对“是”、“否”、“真”和“假”按钮的测试输入并不完全正确。您可以在这里查看和测试。请按照以下步骤操作：

  1. 点击“Open Grid”并选择“True or False”按钮，将出现“True”和“False”按钮。
  2. 单击按钮“True”，按钮将变为绿色，您将在下面看到该按钮的文本输入。这可以。
  3. 现在点击“False”按钮，会发生“False”按钮打开而“True”按钮关闭（变回白色）的情况。现在好的是出现了“False”文本输入，坏的是它没有删除“True”文本输入。

所以我的问题是，如果用户单击“真”或“假”或“是”或“否”的替代按钮，我希望刚刚关闭的按钮将其输入删除。

如何做到这一点？

下面是添加和删除输入的函数：

      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>
4

2 回答 2

2

这是您的 jsfiddle 的解决方案：

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

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

于 2012-10-05T21:09:30.777 回答
0

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

于 2012-10-05T21:00:14.897 回答