Question

我正在写一个Greasemonkey脚本，并且在设置我正在添加的两个按钮的活动状态时遇到问题，每个按钮都用于切换。

我添加了分配类的代码。切换按钮时会出现问题。

例如，当我按 按钮A 时，它会变为活动状态。但是，如果我按 按钮B， 按钮A 仍然有效。从而使我处于活动状态的两个按钮。

我知道我可以在转到另一个按钮之前再次按下我的活动按钮来删除活动课程。但是，我希望实现一个功能，如果按钮A 处于活动状态，并按按钮B ，则按钮A 将失去其活动类，反之亦然。

以下是我正在使用的代码，它将类分配给我的按钮：

$('#ButtonA').toggle(function () { 
    $("#ButtonA").addClass("active"); }, function () {
    $("#ButtonA").removeClass("active");
});

$('#ButtonB').toggle(function () {
    $("#ButtonB").addClass("active"); }, function () {
    $("#ButtonB").removeClass("active"); 
});

Answer 1

目前尚不清楚为什么要使用这样的切换，尽可能避免使用CloneAndModifyProgramming。

在按钮中添加一个类，如下所示：

$("#ButtonA, #ButtonB, #ButtonC").addClass ("MyRadioBtns");

然后使用click来处理活动状态：

$("button.MyRadioBtns").click ( function (zEvent) {
    $("button.MyRadioBtns").removeClass ("active");
    var jThis   = $(this);
    jThis.addClass ("active");

    //- DO WHATEVER ELSE IS DESIRED WITH jThis HERE.
} );

See the code in action at jsFiddle

Answer 2

您只需在第一个回调中为每个按钮添加一行，即可从任何活动按钮中删除活动类。

$('#ButtonA').toggle(function() {
    $('button.active').click(); // Remove active class from any active button.
    // you may adapt 'button.active' to select the proper buttons
    $('#ButtonA').addClass("active");
}, function() {
    $('#ButtonA').removeClass("active");
});

但是，只为所有按钮使用一个代码块，就像这样;

$('#ButtonA, #ButtonB, #ButtonC').toggle(function() { // this refer to the just clicked button.
    $('button.active').click(); // Remove active class from all other buttons.
    $(this).addClass("active");
}, function() {
    $(this).removeClass("active");
});

而不是复制和粘贴。

请参阅http://jsfiddle.net/fNtPP/1/以获取显示带有3个按钮的示例的干净重构代码。

按下另一个按钮后，按钮切换类仍然有效

2 个答案: