jquery - 如何在单击时选择并按下按钮，并取消按下所有其他按钮？

Question

我有一组 3 个按钮，我想对它们进行编码，当单击一个按钮时，它被按下，而其他 2 个按钮进入默认状态。我在 jQuery 中尝试了以下代码行，但 undepress 部分似乎不起作用。获得一些帮助/指出正确的方向会很棒。CSS 文件中定义了“活动”和“默认”类。

$(function () {
    $('#easybtn').click(function () {
        $(this).toggleClass('active');
            $('#mediumbtn').toggleClass('default');
            $('#hardbtn').toggleClass('default');
    });
});

$(function () {
    $('#mediumbtn').click(function () {
        $(this).toggleClass('active');
            $('#easybtn').toggleClass('default');
            $('#hardbtn').toggleClass('default');
    });
});

$(function () {
    $('#hardbtn').click(function () {
        $(this).toggleClass('active');
            $('#easybtn').toggleClass('default');
            $('#mediumbtn').toggleClass('default');
    });
});

Answer 1

首先为他们所有人分配一个公共类......然后称之为difficulty-button：

$('.difficulty-button').click(function () {
    var $this = $(this),
        $all = $('.difficulty-button');

        $all.not($this).toggleClass('active', false).toggleClass('default', true);
        $this.toggleClass('active', true).toggleClass('default', false);
});

小提琴在行动