0

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

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

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

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

这是我正在使用的为我的按钮分配类的代码：

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

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

2 回答 2

2

目前尚不清楚您为什么要使用这样的切换，并尽可能避免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.
} );


请参阅 jsFiddle 的实际代码。

于 2012-10-08T10:36:10.470 回答
1

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

$('#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 个按钮的示例。

于 2012-10-08T10:14:55.013 回答