Question

下面有一段代码，其中包含按钮A-Z。每个按钮都可以打开和关闭。

<?php
    $a = range("A","Z");
?>

<?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++;
        }
    ?>

下面是我试图打开和关闭正确按钮的代码，但问题是它没有关闭按钮。

var answers = '#answer'+btn;
$('.answers.answerBtnsOn').find('answerBtnsOn').addClass('answerBtnsOff');

现在，如果我将最后一行代码更改为以下代码：

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

然后它可以工作，但问题是我的所有按钮都有“.answerBtnsOn”类，我只想关闭“answers”变量中的按钮。

所以我把代码更改为：

$('.answerBtnsOn', answers).addClass('answerBtnsOff');

但它没有关闭任何按钮，为什么不关闭任何打开的按钮？

Answer 1

试试这个

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

或

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

在您的代码中，您永远不会删除on类，只需在其上添加off

Answer 2

试试toggleClass()。看起来你只是在添加类而不是更改它或删除前一个类。

有关完整文档，请参阅jQuery网站：http://api.jquery.com/toggleClass/

如上所述：

$('#foo').toggleClass(className, addOrRemove);

相当于：

if (addOrRemove) {
  $('#foo').addClass(className);
} else {
  $('#foo').removeClass(className);
}

所以在你的代码中，我会写：

$('.answerBtnsOn', answers).toggleClass('answerBtnsOn');

除非您的按钮关闭状态与未按下状态的默认状态不同，否则按钮会非常奇怪。无论哪种方式，您都可以使用此功能轻松切换两个类。

为什么按钮没有关闭？

2 个答案: