0

私はGreasemonkeyスクリプトを書いていますが、追加する2つのボタンのアクティブ状態の設定に問題があります。それぞれを切り替えるためです。

クラスを割り当てるコードを追加しました。ボタンを切り替えるときに問題が発生します。

たとえば、ボタンAを押すと、アクティブになります。しかし、ボタンBを押すと、 ボタンAはアクティブなままです。これにより、2つのボタンがアクティブな状態になります。

別のボタンに移動する前にアクティブボタンをもう一度押すと、アクティブクラスを削除できることを知っています。ただし、ボタンAがアクティブで、ボタンBを押すと、ボタン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

ボタンごとに最初のコールバックに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");
});​


ただし、このように、すべてのボタンに1ブロックのコードのみを使用してください。

$('#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");
});

コピーして貼り付ける代わりに。

3つのボタンの例を示すクリーンなリファクタリングされたコードについては、http：//jsfiddle.net/fNtPP/1/を参照してください。

于 2012-10-08T10:14:55.013 に答える