0

私はCSSに次のように機能するdivを持っています：SomeDivには別のクラスがあります。それはSomeRedDivである場合もあれば、SomeBlueDivである場合もあります。SomeDivでマウス入力すると、SomeYellowDivクラスが追加されます。しかし、マウスを離れるときは、各divをSomeRedDivまたはSomeBlueDivの初期状態に戻したいと思います。これは私が持っているものです：

     <div class="SomeDiv SomeRedDiv"></div>
     <div class="SomeDiv SomeBlueDiv"></div>

    $('.SomeDiv').mouseenter(function () {

       // this makes all SomeDivs turn yellow
       $(this).removeClass().addClass('SomeDiv SomeYellowDiv');
    });

    $('.SomeDiv').mouseleave(function () {

       // here I want to use closure so that the function remembers
       // which class it initially was; SomeBlueDiv or SomeRedDiv
       $('this).removeClass().addClass('SomeDiv'); // add the initial color class
    });

グローバルでこれを行うことはできますが、クロージャーによってコードが改善されるかどうかを確認したいと思います。関数が状態を記憶できるようにするクロージャーの概念は知っていますが、ここでそれを機能させる方法がわかりません。

あなたの提案をありがとう。

4

2 に答える 2

4

無関係な機能が2つあるため、ここではClsouresは適用されません。

代わりに$(this).data(...)、要素に関連付けられた任意のデータを格納するを使用する必要があります。

于 2012-07-13T13:26:42.790 に答える
1

ここではクロージャーは実際には必要ありません。マウス入力時に赤/青クラスを他のデータコンテナにプッシュし、マウス終了時に元に戻すだけです。

$('.SomeDiv').mouseenter(function () {
    //remember the current colour class...
    $(this).data('orig-colour', $(this).is('.SomeDivBlue') ? 'Blue' : 'Red'));
    //...and now remove it and add yellow
    $(this).removeClass('SomeDivRed SomeDivBlue').addClass('SomeYellowDiv');
});

$('.SomeDiv').mouseleave(function () {
    //remove yellow and reinstate the original colour class
    $(this).removeClass('SomeDivYellow').addClass('SomeDiv'+$(this).data('orig-colour'));
});

また、すべてのクラスを削除してから必要に応じて再追加するコードとは対照的に、削除する必要のあるクラスのみを削除することにも注意してください。

divが多い場合は、パフォーマンスの面でより最適であるため、イベントの委任についても検討することをお勧めします。これは大きな変化ではありません。

$('.SomeDiv').mouseenter(...

のようなものになります

$('body').on('mouseenter', '.SomeDiv', ...

最後に、クラスを物理的に削除する必要がある理由については、プログラム上の理由があると思います。目的が純粋に視覚的である場合は、明白なことを指摘するリスクを冒して、CSSを作成し、黄色のクラスが青/赤のクラスの効果をオーバーライドするだけで、後者を明示的に削除する必要をなくす必要があります。

于 2012-07-13T13:37:31.047 に答える