0

我有一个 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');

更新：

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

  • 第1步：在左侧你会看到一个绿色的加号按钮，点击这个按钮，会出现一个模态窗口。
  • 第 2 步：在模式窗口的搜索栏中，您将看到一个搜索栏，输入“AAA”并提交。
  • 第 3 步：您会看到一堆结果供您搜索。在第一行中，您将看到一个“Answer”列，该列在该第一行中的该列下显示“B”。单击“添加”按钮以添加该行。
  • 第 4 步：您现在将在右侧看到按钮“B”突出显示。

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

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

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

4

1 回答 1

1

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

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

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

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

于 2012-07-09T19:17:56.823 回答