2

在下面的代码中有一堆字母按钮：

<?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>
</table>

现在下面的代码能够打开一个回答按钮：

$('#answer'+btn).addClass("answerBtnsOn");

但我想要做的是能够打开一些答案按钮并关闭其他答案按钮。

例如，如果答案是 A，那么我希望打开上面的代码行所做的按钮“A”，但我希望关闭所有其他字母按钮。如何关闭其他字母按钮？

这里的代码将关闭字母按钮addClass("answerBtnsOff");，

更新：

我也有一个小问题。如果“答案”是 A，则打开字母按钮“A”，这很好，但如果答案是“B D”，那么它应该打开字母按钮“B”和“D”，但它没有t 打开任何按钮。有人知道这是为什么吗？

4

4 回答 4

2

一般模式是将所有按钮重置为关闭状态，然后仅启用所需的按钮。

// reset all answer buttons to the off state
// remove any on/off classes
$("#answerSection").find("button").removeClass("answerBtnsOff").removeClass("answerBtnsOn");

// set all buttons to off
$("#answerSection").find("button").addClass("answerBtnsOff");

// now turn on only the buttons that are valid
$("#answerA").removeClass("answerBtnsOff").addClass("answerBtnsOn");
$("#answerB").removeClass("answerBtnsOff").addClass("answerBtnsOn");
于 2012-07-08T01:32:40.110 回答
1

关于您的更新，如果我对您的理解正确，则您有一串以空格分隔的答案。如果是这种情况，这段代码应该处理它：

var answers = btn.split(" ");
var answer_selector = '#answer'+answers.join(",#answer");
$(".answerBtns").removeClass("answerBtnsOn"); 
$(answer_selector).addClass("answerBtnsOn");
于 2012-10-07T12:16:19.340 回答
0

嗯，这可能太简单了，但是您可以先将它们全部关闭，然后再将选定的那些重新打开吗？

编辑：

尝试这个：

$(".answers").addClass("answerBtnsOff");
$('#answer'+btn).addClass("answerBtnsOn");
于 2012-07-08T01:02:44.293 回答
0

尝试以下选择器组合：

$('#answer'+btn1+', #answer'+btn2).addClass("answerBtnsOn").removeClass("answerBtnsOff");
$('[id^="answer"]').not('#answer'+btn1+', #answer'+btn2).addClass("answerBtnsOff").removeClass("answerBtnsOff");
于 2012-07-08T01:05:02.407 回答