2012-07-06 49 views
0

在我的页面顶部,我有一个选项和答案控件,用户可以从网格中选择一个选项,并显示相关答案按钮在选择的选项上。如何在底部的代码行末尾添加触发器事件

下面是存储选项和答案的控制功能的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> 

的代码行,显示答案按钮的正确数量被点击Add按钮后是这样的代码:

$('#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').....; 
+0

你可以把它变成的jsfiddle所以我们可以测试代码 – 2012-07-06 22:58:30

+0

@marabutt它有它的PHP代码,所以它不会在拨弄工作,你要我在页面上创建一个简单的例子,并发送你有一个网址? – user1490145 2012-07-06 23:00:18

+0

是啊,只是转储呈现的HTML – 2012-07-08 09:53:26

回答

0

所以,你需要修改这个工作,但会这样的工作?

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

我已经测试了你的代码行,但它没有奏效。在包含选项和答案控制的行内,如果我以前有选项类型“4”,这意味着出现4个答案按钮(A,B,C,D),然后如果我选择了不同的选项类型,例如“7”作为点击“添加”按钮,选项类型文本框从“4”变为“7”,但仍显示4个应答按钮,而不是7个应答按钮(A,B,C,D,E,F,G )。 – user1490145 2012-07-06 23:22:45