0

左、中央、右のクラスの3つのdivがあり、それらの位置を交換して、新しい位置に移動するときに新しいクラスを適用したいと思います。しかし、何らかの理由で機能しませんこれは私のスクリプトです：

$(function() {
            $(".left").css("left","50px");
            $(".center").css("left","300px");
            $(".center").css("width","300px");
            $(".center").css("height","300px");
            $(".center").css("top","25px");
            $(".right").css("left","650px");
            $(".right").click(function(){
                $(".left").animate({
                    left: '650px'
                    }, 1000, function() {
                    });
                $(".center").animate({
                    left: '50px',
                    width: '200px',
                    top: '75px',
                    height: '200px'
                    }, 1000, function() {
                    });
                $(".right").animate({
                    left: '300px',
                    width: '300px',
                    height: '300px',
                    top: '25px'
                    }, 1000, function() {
                    });
                $(".bule").removeClass("left right center");
                $(".second").addClass("left");
                $(".third").addClass("center");
                $(".first").addClass("right");
                $(".bule").removeClass("first second third");
                $(".left").addClass("first");
                $(".center").addClass("second");
                $(".right").addClass("third");
                });
        });

これが実際の例です。

4

1 に答える 1

4

jQueryセレクターを使用して要素を選択する$('...')と、選択が評価され、それらの要素に対して次のアクションが実行されます。後でクラスを削除するか、選択した要素のIDを変更した場合、それらのアクションはすでに実行されているため、それらは保持されます。同様に、他のセレクターからアクションを自動的に継承することはありません（選択が行われた時点でそのクラス/ IDを持っていなかったため）。

イベントを一度バインドし、新しい要素が追加されたとき、またはクラスが変更されたときにイベントを機能させる場合は、わずかに異なるイベント構文を使用する必要があります。

$('body').on('click', '.right', function() {

});

セレクターがbody要素になっていることに注目してください（これが実行されるとbody要素が常に存在するため）。ここでjQueryに伝えているのは、clickイベントを<body>要素にバインドし、の子<body>がクリックされたときに、式に対して要素を評価すること.rightです。その式が一致する場合は、関数を呼び出します。

このメソッドは、JavaScriptイベントの伝播を利用します。この場合、イベントは最上位の祖先までバブルバックします。これは、div内のリンクをクリックすると、リンク、div、および本文のクリックイベントがこの順序でトリガーされることを意味します。

于 2013-02-08T13:49:00.890 に答える