0

私はいくつかの新しい CSS3 機能を使用して、クリック機能をフリップ カードのように見せています。そうすることで、クライアントはフリップバックする機能を要求しました。removeClass() を使用してそれを行おうとしていますが、できません。addClass() は正常に動作しますが、「フリップ」クラスは削除されません。jquery 1.8.1 を使用しています。

$(document).ready(function(){
    $('.flipper').click(function(){
        $(this).addClass('flip');
    });
    $('#flipBack').click(function(){
        $(".flipper").addClass('flipBack').removeClass('flip');
    });
});
4

3 に答える 3

2

おそらく、両方のイベントが呼び出されます。そして、2回目のクリックでフリップクラスを削除した後、最初のクリックで元に戻ります

于 2012-11-07T17:25:42.957 に答える
2

おそらくjsFiddleなど、一部の html が役立つ場合がありますが、追加と削除をすべて一緒に行うことができます。

FlipBack をデフォルト クラスとして設定すると (アニメーション化されている可能性がありますが、デフォルトの状態になっていると想定しています)、jQuery のtoggleClassをはるかに簡単に使用できます。

$(function() {
    $('.flipper').click(function(e) { e.stopPropagation(); $(this).toggleClass('flip flipBack') });
    // and if you really need it, tho i'm still unsure the full functionality here
    $('#flipBack').click(function(e) { e.stopPropagation(); $('.flipper').toggleClass('flip flipBack') });
})

jdFiddle の例

両方のクリックが同時に呼び出されていませんか? いくつかのhtmlは本当に役に立ちます

于 2012-11-07T17:27:54.937 に答える
0

問題は、あなた#flipBackが の中にいる可能性があります.flipper。その場合は、イベントのバブリングを停止する必要があります。

これは問題のサンプルですhttp://jsfiddle.net/kSg89/1/

ここに解決策がありますhttp://jsfiddle.net/kSg89/2/

$(document).ready(function(){
    $('.flipper').click(function(){
        $(this).addClass('flip');
    });
    $('#flipBack').click(function(e){
        e.stopPropagation();
        $(".flipper").addClass('flipBack').removeClass('flip');
    });
});
于 2012-11-07T17:35:36.600 に答える