它没有在添加的行中显示A，B，C ...按钮，但我希​​望A，B，C ...按钮不显示在顶部控件上

Question

我有一个您可以访问的应用程序here

当您打开应用程序时，请单击“打开网格”并选择任何编号选项。您将看到一些字母按钮（A，B，C等）然后在下面的文本框中键入数字“0”。完成此操作后，单击“添加问题”按钮。

问题是，添加一行后，顶部的A，B，C ...按钮不显示，但是它也没有显示A，B，C ......按钮在你添加的行中。为什么它没有在添加的行中显示A，B，C ...按钮，因为我已经声明在单击“添加问题”按钮后，不显示顶部的A，B，C按钮，不隐藏添加的行中的A，B，C按钮。

下面是html代码，其中A，B，C ...按钮显示在顶部：

...

<tr class="answer">
<td>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>
    <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>

...

下面是jquery代码，其中A，B，C ...按钮显示在添加的行和css中，假设不显示顶部控件上的A，B，C ...按钮：

function insertQuestion(form) {   

            var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;        



    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $answer = $("<td class='answer'></td>");


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


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


    $('.answerBtns').css('display', 'none');

}

由于

Answer 1

这一行：

$('.answerBtns').css('display', 'none');

将使用“answerBtns”类隐藏所有元素，据我所知，它包括页面所有部分中的所有“A”，“B”，“C”按钮

您需要通过例如指定包含元素来使您的选择器更具体：

$('#optionAndAnswer .answerBtns').css('display', 'none');

所以它只隐藏你关心的特定的。或者在页面底部给出一个不同类的答案按钮。要么（或两者都应该）这样做。

（顺便说一下，您可以使用$('.answerBtns').hide();更轻松地隐藏它们。）