添加和刪除類工作不正常

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()瞭解如何改進您已有的內容。