Question

我有一个应用here，用户可以选择他们的选项和答案。解释这个问题的最好方法是，如果您使用应用程序本身，那么您可以看到正在发生的事情。请按照以下步骤进行申请。

步骤1：当您打开应用程序时，您将看到“打开网格”链接，单击它并选择一个选项后选择一个选项类型将在底部显示答案按钮。例如，如果你选择的选项是“5”，它会显示5个答案按钮“A - E”，如果选项是8，它将显示8个答案按钮“A-H”。

现在这很好。但我遇到的问题是用户是否想要添加以前的选项。请看下面的步骤：

第2步：刷新页面
步骤3：您将在左侧看到绿色加号按钮，然后单击它，这将打开一个模态窗口。
步骤4：在搜索框中输入“AAA”，然后点击“提交” 按钮，它将显示数据库中的行。
步骤5：请点击“添加”按钮选择一行模态窗口将关闭，如果你看看答案和选项在右侧控制，可以看到Option Type 出现文本框和答案数量文本框，但“答案” 按钮不会出现。

所以我的问题是如何在用户点击“添加”按钮后显示“答案”按钮？

下面是控制点击“添加”按钮后发生的事情的功能：

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

我不太确定我是否完全理解你的问题，但我尝试了几次你的应用程序，我想我明白了：从数据库加载结果 - ＆gt;用结果填充字段？

无论如何，我看到你正在使用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);

您是否考虑过而不是使用onclick，使用JQuery来处理类的点击？

编辑：

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”然后，不要让“Previous Questions”查询填充该字段，让它将它返回的值存储为vars，然后只需调用弹出答案时填充答案的相同函数：

optionPicked("op" + opType);

或者你打电话给它。

Answer 3

编辑：“此”需要作为对象传递，尝试编辑代码

从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）调用它，以便它知道要使用哪些数据。我猜这是解决者。只需再次运行该功能（可能需要稍微修改一下才能使用这两个按钮）

为了做到这一点。制作eventlisteners，一个用于.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
}

单击添加按钮后如何显示答案按钮？

4 个答案: