單擊添加按鈕后如何顯示應答按鈕？

Question

我在這里有一個應用程序，用戶可以選擇他們的選項和答案。 向您解釋這個問題的最佳方法是您是否使用應用程序本身，以便了解正在發生的事情。 請按照下面的步驟申請。

• 第1步：打開應用程序時，將看到“打開網格”鏈接，單擊它並選擇一個選項類型，選擇一個選項后，它將在底部顯示答案按鈕。 例如，如果您選擇的選項是“ 5”，它將顯示5個應答按鈕“ A-E”，如果所選擇的選項是8，則將顯示8個應答按鈕“ AH”。

現在很好。 但是我的問題是用戶是否要添加上一個選項。 請查看以下步驟：

• 步驟2：刷新頁面
• 步驟3：您會在左側看到一個綠色的加號按鈕，單擊它，將打開一個模態窗口。
• 步驟4：在搜索框中鍵入“ AAA”，然后單擊“提交”按鈕，它將顯示數據庫中的行。
• 步驟5：請點擊“添加”按鈕選擇一行，模態窗口將關閉，如果您查看右側的答案和選項控件，您會看到“選項類型”文本框和“答案數量”文本框出現，但不顯示“答案”按鈕。

所以我的問題是，用戶單擊“添加”按鈕后如何顯示“答案”按鈕？

下面是控制單擊“添加”按鈕后會發生什么的功能：

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;
} 

下面是存儲答案按鈕的代碼（我需要調用什么才能顯示答案按鈕）：

<table id="optionAndAnswer" class="optionAndAnswer">

...

<?php
    $a = range("A","Z");
?>

<table id="answerSection">
    <tr>

<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
    <tr>
<td>
<input class="answerBtns answers" name="answerTrueName"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerYesName"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerNoName"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
</table>
...
</table>

更新：

下面是從網格中選擇一個選項后將其導入答案按鈕的代碼：

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

    {

    appendAnswers(this);

});

function appendAnswers(t){
var clickedNumber = t.value;

        $(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
        $(t).closest('.option').siblings('.numberAnswer').find('.string').hide();



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


         // show but don't change the value
         $(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();


            } else {

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

            }

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


        });

        prevButton = clickedNumber;


            $(t).closest('.option').siblings('.noofanswers').find('.string').hide();     
            $(t).closest('.option').siblings('.noofanswers').find('.answertxt').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).
    }

Answer 1

我不太確定我是否能完全理解您的問題，但是我嘗試了幾次您的應用程序，我想我知道：從數據庫中加載結果->用結果填充字段？

無論如何，我看到您正在使用Jquery，所以我認為您應該能夠使用.html（）或.append（）在for循環中添加每個按鈕：（我假設您已將答案按鈕存儲在數組中）。 我很懶，所以我通常使用ID為目標命名#ButtonHolder是您用於按鈕的名稱。

var buttonhtml = ""; //I personally like to build the html then insert it. 
var lastchar = gridValues.charCodeAt(gridvalues.length-1);
for (i=65;i<=lastchar;i++) // 65 is the code for "A"
buttonhtml += "<input type=\"button\" onclick=\"btnclick(this);\" value=\""+String.fromCharCode(i)+"\" id=\"answer"+String.fromCharCode(i)+"\" name=\"answer"+String.fromCharCode(i)+"Name\" class=\"answerBtns answers answerBtnsOn\">";
$("#ButtonHolder").html(buttonhtml);

您是否考慮過使用JQuery通過類處理單擊而不是使用onclick？

編輯：

function addwindow(questionText,textWeight,numberAnswer,gridValues) { 



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

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

        if( gridValues != "True or False" && gridValues != "Yes or No" )
{
   var myNumbers = {};
   myNumbers["A-C"] = "3";
   myNumbers["A-D"] = "4";
   myNumbers["A-E"] = "5";
//...
   myNumbers["A-Z"] = "26";
   gridValues = myNumbers[gridValues];
   $('#mainNumberAnswerTxt').show();

}
else{
   $('#mainNumberAnswerTxt').hide();
}

        $('#mainTextarea').val(questionText); 
        $('#mainTxtWeight').val(textWeight);
        $('#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);

    var lastchar = gridValues.charCodeAt(gridValues.length-1); // getting the last charcode i.e. "A-D" -> "D" -> 68
   $(".ansBtns").removeClass("answerBtnsOn").addClass("answerBtnsOff"); // reset all the buttons to off *I think this works* 
    // 65 is the code for "A" Iterating each choice and activating it:
    for (i=65;i<=lastchar;i++)
    $("#answer"+String.charCodeAt(i)).addClass("answerBtnsOn");    
        $.modal.close(); 
        return false;
    } 

Answer 2

好吧，當您單擊網格中的一個選項時，會觸發什么？ 如果根據選項類型來命名具有您要查找的屬性的對象的名稱：即“選項類型4”為“ op4”，則不必在字段中填充“先前的問題”查詢，而應使用它將返回的值存儲為var，然后單擊彈出菜單中的選項時，只需調用填充答案的函數即可：

optionPicked("op" + opType);

還是不管你怎么稱呼它。

Answer 3

編輯：“ this”需要作為對象傳遞，請嘗試編輯代碼

像這樣從onClick中提取函數，然后像“ getChoice（4）;”那樣調用它 當歷史記錄頁面觸發添加按鈕時。

像這樣重寫：

function getChoice(obj){

    var clickedNumber = this.value;

    $(obj).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
    $(obj).closest('.option').siblings('.numberAnswer').find('.string').hide();



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


     // show but don't change the value
     $(obj).closest('.option').siblings('.numberAnswer').find('.answertxt').show();


        } else {

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

        }

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


    });


    getButtons();

}



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

getChoice(this);
});

Answer 4

只需調用與您單擊.gridBtns相同的函數即可。 將函數設為自己的函數，並使用屬性（this）對其進行調用，以使其知道要使用的數據。 我想這就是解決方案。 只需再次運行該功能（也許您需要對其進行一些修改才能同時使用兩個按鈕）

為此。 制作事件監聽器，一個用於.gridBtns，一個用於.addBtn。

調用.gridBtns或.addBtns時，只需在eventlistener中運行以下函數：

$('.gridBtns').on('click', function(){
  appendAnswers(this);
});

並將您以前使用的功能修改為：

function appendAnswers(t){
  //t = this you defined in the onclick event
  //rest of your code here
}