添加和删除类工作不正常

Question

我有一个PHP代码它显示从AZ按钮：

<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'); 

UPDATE：

这里是一个DEMO所以你可以看到发生了什么，皮斯遵循以使用演示以下步骤：

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

这是在此刻很好，但现在的问题来了：

• 第5步：在该行中再次单击绿色加号按钮，并执行 相同的搜索。
• 第6步：这次添加“答案”为“A C”的第二行。现在您可以看到 按钮A和C突出显示，但仍然突出显示按钮B ，应将其关闭。

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

Answer 1

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

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

首先这样做，因为它会删除该类的所有实例，然后将该类添加到需要它的答案中。

您也可以参考jQuery manual for .toggleClass()了解如何改进您已有的内容。