jquery - 它没有在添加的行中显示 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(); 更轻松地隐藏它们。)