Question

在我的页面顶部，我有一个选项和答案控件，用户可以从网格中选择一个选项，并根据所选的选项显示相关的答案按钮。

以下是存储选项和答案控制功能的html代码：

页面顶部的选项和答案控制：

<table id="optionAndAnswer" class="optionAndAnswer">
<tr class="option">
<td>1. Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" />
    <span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
</div>

<?php
    $num = range("3","26");
?>

<table class="optionTypeTbl">
<tr>

    <?php
    $i = 1;
    foreach($num as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";        
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
    ?>

        </tr> 
        </table>

        </td>
</tr>
<tr class="answer">
<td>3. Answer</td>
<td>

<?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>
</table>
</td>
</tr>
</table>

单击添加按钮后显示正确答案按钮数的代码行是以下代码：

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

现在我没有包含这段代码，但用户可以点击“添加”按钮将选项类型添加到选项类型文本框中。当一个选项类型插入到文本框中时，它会自动选择选项值在网格中匹配的选项按钮，因此，上面的触发代码可以通过查看哪个选项类型是显示正确数量的答案按钮从网格中选择。

我遇到的问题是，这仅适用于页面顶部的选项和答案控件。用户可以在应用程序中添加行，并在每行中添加自己的选项和答案控件。一行中的追加和答案以及选项控制的代码如下：

  function insertQuestion(form) {    



        var $tbody = $('#qandatbl > tbody'); 
        var $tr = $("<tr class='optionAndAnswer' align='center'>");
        var $options = $("<div class='option'>Option Type:<br/></div>");
        var $answer = $("<div class='answer'>Answer:<br/></div>");

        $('.gridTxt', context).each( function() {

        var $this = $(this);
        var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
        .attr('name',$this.attr('name')+"[]")
        .attr('value',$this.val())
        .appendTo( $options )
        .after("<span href='#' class='showGrid'>[Open Grid]</span>");

        $questionType = $this.val();

        });


    var $this, i=0, $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if(i%7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));


        $newBtn.appendTo($cell);

        i++;
    });


        $td.append($options);
        $td.append($answer);
        $tbody.append($tr); 

    }

所以我的问题是，如果此触发器：$('#btn'+gridValues).trigger('click');仅适用于顶部的主选项和答案控件，如何包含此触发器以便能够在答案中显示正确数量的答案按钮和特定行中的选项控制？

我有起始代码可以找到该行，只需要帮助知道如何在该代码的末尾包含触发器，因为选项中没有#btn并且行中的答案控件：

$(plusbutton_clicked).closest('tr').....;

Answer 1

所以，你需要修改它才能工作，但是这样的工作会有用吗？

$(plusbutton_clicked).closest('tr').find(".answerBtnsRow").click();

如何在底部的这行代码末尾添加触发器事件

1 个答案: