0

我有 2 个按钮，我试图说明如果“1”按钮打开，则关闭“2”按钮，否则如果“2”按钮打开，则关闭“1”按钮。

但目前发生的情况是，如果我打开“2”按钮，然后打开“1”按钮，那么当“1”按钮打开而“2”按钮关闭时，这可以正常工作。但是，如果我然后尝试再次打开“2”按钮，它不会打开它，它保持关闭状态并且按钮“1”保持打开状态。有谁知道为什么会这样？

下面是代码：

function btnclick(btn)
{

$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    if ($("#answer1").hasClass('answerBtnsOn')) {
        $("#answer2").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($("#answer2").hasClass('answerBtnsOn')) {
        $("#answer1").removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    return false;
}

下面是 1 和 2 按钮的 html：

1 个按钮：

<input class="answerBtns answers answerBtnsOff"   id="answer1"  type="button"   value="1"   onclick="btnclick(this);"/>

2 按钮：

<input class="answerBtns answers answerBtnsOff"    id="answer2"         type="button"   value="2"       onclick="btnclick(this);"/>
4

1 回答 1

1

您没有检查正在单击哪个按钮。

像这样的东西应该工作：

function btnclick(btn)
{
    var $btn = $(btn);
    var id = btn.id;
    var $otherBtn = id === "answer1" ? $("#answer2") : $("#answer1");

    $btn.toggleClass("answerBtnsOff");
    $btn.toggleClass("answerBtnsOn");

    if (btn.hasClass('answerBtnsOn') ) {
        $otherBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if (btn.hasClass('answerBtnsOff')) {
        $otherBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    return false;
}
于 2012-07-11T10:49:32.953 回答