Question

I have a piece of code below where it contains buttons A-Z. Each button can be turned on and turned off.

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

Below is the code where I am trying to turn on and off the correct buttons but the problem is that it is not turning off the buttons.

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

Now if I change the last line of code to code below:

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

then it works but the problem is that all my buttons have the class “.answerBtnsOn”, I only want the buttons within the “answers” variable to be turned off.

So I changed the code to this:

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

But it doesn’t turn off any buttons, why won’t it turn off any buttons which are turned on?

Answer 1

Try this

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

or

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

In your code you’re never removing the on class just adding the off on top of it