Question

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

<?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”，这很好，但如果答案是“BD”，那么它应该打开字母按钮“B”和“D”，但它不会“ t打开任何按钮。有谁知道这是为什么？

Answer 1

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

// 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");

Answer 2

关于你的更新，如果我正确地理解你，你有一串空格分隔的答案。如果是这样的话，这段代码应该处理它：

var answers = btn.split(" ");
var answer_selector = '#answer'+answers.join(",#answer");
$(".answerBtns").removeClass("answerBtnsOn"); 
$(answer_selector).addClass("answerBtnsOn");

Answer 3

嗯，这可能太简单了，但是你可以先将它们全部关掉然后重新打开吗？

修改

试试这个：

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

Answer 4

尝试以下选择器组合：

$('#answer'+btn1+', #answer'+btn2).addClass("answerBtnsOn").removeClass("answerBtnsOff");
$('[id^="answer"]').not('#answer'+btn1+', #answer'+btn2).addClass("answerBtnsOff").removeClass("answerBtnsOff");

如何关闭字母按钮？

4 个答案: