1

ユーザーがオプションと回答を選択できるアプリケーション[ここ][1]があります。申請書は以下の手順に従ってください。

  • ステップ1：アプリケーションを開くと、[グリッドを開く]リンクが表示され、それをクリックしてオプションタイプを選択します。オプションを選択すると、下部に回答ボタンが表示されます。たとえば、選択したオプションが「5」の場合、5つの回答ボタン「A-E」が表示されます。選択したオプションが8の場合、8つの回答ボタン「AH」が表示されます。

これで問題ありません。ご覧のとおり、グリッドから選択したオプションに応じて、正しい量の回答ボタンが表示されます。しかし、私が抱えている問題は、ユーザーが以前のオプションを追加したい場合です。以下の手順をご覧ください。

  • ステップ2：左側に緑色のプラスボタンが表示されます。それをクリックすると、モーダルウィンドウが開きます。
  • ステップ3：検索ボックスに「AAA」と入力し、[送信]ボタンをクリックすると、データベースの行が表示されます。
  • ステップ4：最初の行を見ると、[オプションタイプ]列の下にADであることがわかります。[追加]ボタンをクリックして、この行を選択します。

モーダルウィンドウが閉じ、右側の回答とオプションコントロールを見ると、[オプションタイプ]テキストボックスに数字の4が含まれていることがわかります（これは、オプションタイプが「AD」だったためです。 4つのオプション「A、B、C、D」）であるため、回答ボタンADを表示する必要がありますが、表示されません。回答ボタンはまったく変更されず、同じままです。

だから私の質問は、ユーザーが「追加」ボタンをクリックした後に正しい回答ボタンを表示するにはどうすればよいですか？

以下は、グリッドからオプションが選択された後に回答ボタンをインポートするコードです。

  $('.gridBtns').on('click', function()

            {

    var clickedNumber = this.value;

        $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
    if (!isNaN(clickedNumber) && index < clickedNumber) {
    $(this).show();


    } else {

    $(this).hide();
    $(this).removeClass('answerBtnsOn');
    $(this).addClass('answerBtnsOff');

    }

    var $this = $(this);
    var context = $this.parents('.optionAndAnswer');
    console.log($this);


                });

if (clickedNumber === 'True or False') {

  $(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
   $(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();

} else if (clickedNumber === 'Yes or No') {

      $(this).closest('.option').siblings('.answer').find('input[name=answerYesName]').show();
      $(this).closest('.option').siblings('.answer').find('input[name=answerNoName]').show();  

 }




                getButtons();

            });


        });

    function getButtons()
    {
        var i;
        if (initClick == 0) {
for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
$("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");

            }

            initClick = 1;
        }
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
    }

以下は、「追加」ボタンがクリックされた後に何が起こるかを制御する機能です。

    function addwindow(numberAnswer,gridValues) { 

        if(window.console) console.log();

        if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 


            $('#mainNumberAnswerTxt').val(numberAnswer);
            $('#mainGridTxt').val(gridValues);
            } else { 
$(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);
$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);
                }

        $.modal.close(); 
        return false;
    }
4

1 に答える 1

0

上記のコードと、提供したリンクのHTMLソースコードを分析したところ、一歩遅れているように見えます。mainGridTxt入力ボックスでグリッド値（上記の場合は4）のみを割り当てています。グリッドボタンでクリックイベントをトリガーする必要があります。

$model.closeの後に以下のコードを入れてください

$('#btn'+gridValues).trigger('click');

上記のコードは、IDが「btn4」のグリッドボタンでクリックイベントをトリガーします。

于 2012-07-06T18:45:14.080 に答える