Question

我有一个PHP代码，它显示来自A-Z的按钮：

  <table id="optionAndAnswer" class="optionAndAnswer">
    <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++;
            }
        ?>

...

现在使用“.answerBtnsOn”和“.answerBtnsOff”打开和关闭这些按钮

我遇到的问题是它突出显示应该打开的按钮，但它不会突出显示（关闭）其他按钮。因此，如果按钮B突出显示，但现在答案是A和C，它应该只打开按钮A和C，所有其他按钮应该关闭，但这不会发生，因为按钮B仍然与A和C一起打开

所以我的问题是如何关闭应该关闭的按钮。目前它正在打开正确的按钮，但没有关闭其他按钮。

以下是当前代码：

var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', ');

        $(answers).removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

更新：

这是一个DEMO所以你可以看到发生了什么，请按照以下步骤使用演示：

步骤1：在左侧，您将看到绿色加号按钮，单击在此按钮上将出现一个模态窗口。
步骤2：在模态窗口的搜索栏中，您将看到搜索栏，输入“AAA”并提交。
第3步：您会看到一系列搜索结果。在里面在第一行，您将看到一个“答案”列，其中表示“B” 第一行中的列。单击“添加”按钮添加该按钮行。
步骤4：您现在将在右侧看到按钮“B” 突出显示。

现在这很好，但问题现在出现了：

步骤5：再次单击行中的绿色加号按钮并执行相同的搜索。
步骤6：这次添加“Answer”为“A C”的第二行。现在如你所见，按钮A和C突出显示，但按钮B是仍然突出显示，应该关闭它。

这就是我的问题，在这个例子中为什么按钮“B”没有关闭，因为它现在不是答案？

Answer 1

我认为您需要从包含类answers的所有项中删除该类，而不是删除answerBtnsOn变量的类。

$( '.answerBtnsOn' ).removeClass( 'answerBtnsOn' ).addClass( 'answerBtnsOff' );

首先执行此操作，因为它会删除该类的所有实例，然后将该类添加到需要它的答案中。

您可能还希望参考jQuery manual for .toggleClass()，了解如何改善您已有的内容。

添加和删除类无法正常工作

1 个答案:

添加和删​​除类无法正常工作

1 个答案:

添加和删除类无法正常工作