Question

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

Answer 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;
}

按钮无法正常工作

1 个答案: