1

「はい」、「いいえ」、「真」、「偽」ボタンのテスト入力が正しくありません。ここで自分の目で確かめてテストすることができます。以下の手順に従ってください。

  1. 「グリッドを開く」をクリックし、「TrueまたはFalse」ボタンを選択すると、「True」および「False」ボタンが表示されます。
  2. 「True」ボタンをクリックすると、ボタンが緑色に変わり、そのボタンのテキスト入力が下に表示されます。これで結構です。
  3. ここで「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;
}

以下は、「True」、「False」、「Yes」、「No」ボタンです。

 <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が含まれるように、質問数のカウンターを保持することをお勧めします。これにより、遡及的に更新することもできます（4番目の質問を追加した後に3番目に設定します）

于 2012-10-05T21:00:14.897 に答える