jQuery無法識別元素上的類更改

Question

好的，所以我做了一個自定義函數，然后可以使用div的類進行調用。

我將目標定為“后退”類，然后應用此函數來放大和移動div。 完成此動畫后，我將刪除“ back”類，並添加“ front”類。

我還有另一個函數正在單擊具有“ front”類的元素，但是當我單擊該元素時，該元素僅具有“ front”類而不是“ back”，它仍在觸發第一個函數。

如果不再有該類怎么辦？

這是我的代碼...

$(document).ready(function () {
    "use strict";

    (function ($) {
        $.fn.expand = function () {

            var wide = this.css('width').replace(/[^-\d\.]/g, '') * 10;
            var high = this.css('height').replace(/[^-\d\.]/g, '') * 10;
            var marg = -(wide / 2);
            $(this).removeClass('back');
            $(this).animate({
                'width': wide,
                'height': high,
                'margin-left': marg,
                'bottom': '0'
            }, 3000, 'easeInOutCubic', function () {
                $(this).addClass('front');
            });

        };
    })(jQuery);

    $('.back').click(function () {
        $(this).expand();
        $('.wall').animate({
            'bottom': '+=10px'
        }, 3000, 'easeInOutCubic');
    });

    $('.front').click(function () {
        $('.wall').animate({
            'bottom': '-=100px'
        }, 300);
        $('.floor').animate({
            'bottom': '-=100px'
        }, 300);
    });
}); // JavaScript Document

...和當前文件在這里。.http: //thetally.efinancialnews.com/tallyassets/chinahurdles/index.html

Answer 1

該問題是由於在加載時將事件處理程序靜態附加到具有.back和.front類的元素而引起的。 即使您更改類，處理程序仍將與那些特定元素保持聯系。

當類動態變化時，請使用附加到不變的祖先元素的委托事件處理程序（如果沒有其他更方便的方法， document是最好的默認值） 。

$(document).on('click', '.back', function() {
    $(this).expand();
    $('.wall').animate({'bottom':'+=10px'}, 3000, 'easeInOutCubic');
});

$(document).on('click', '.front', function() {
    $('.wall').animate({'bottom':'-=100px'}, 300);
    $('.floor').animate({'bottom':'-=100px'}, 300);
});

委托事件的工作方式是監聽事件，使事件冒泡到目標祖先元素（在本例中為document ）， 然后將jQuery選擇器僅應用於冒泡鏈中的元素 ， 然后將函數應用於實際上引起的任何匹配元素事件 。

基本上，他們在事件發生時 （而不是在事件注冊時）評估選擇器，因此可以處理動態更改/添加的內容。

邊注：

您已經嵌套了兩個DOM ready處理程序。 $(function ($) {只是$(document).ready(具有局部作用域$的快捷方式。盡管嵌套DOM ready處理程序是無害的，但這是一種浪費（因為內部的立即被觸發）

僅使用此一項：

$(document).ready(function () {
    "use strict";
    $.fn.expand = function () {

要么

jQuery(function ($) {
    $.fn.expand = function () {
    ...
});

Answer 2

問題在於瀏覽器會讀取您的所有處理程序並應用其頁面加載。 因此，將處理程序設置為類是錯誤的。 類僅是查找特定DOM元素的說明符

我建議您使用下一個解決方案在任何父元素上使用on事件，並將處理程序應用於該事件

$(document).on('click', '.front', function() {
});

$(document).on('click', '.back', function() {
});

因此，每次您的點擊在元素上觸發時，它都會傳播到帶有處理程序的元素，並將搜索以特定選擇器（類.back或.front）確切地調用回調

Answer 3

您已將偵聽器添加到DOM元素。 更改elements類不會刪除您已附加的偵聽器。 與您嘗試對類進行處理的最接近的解決方案是這樣的：

$( document ).ready(function() {
    "use strict";

    (function($){
        $.fn.expand = function() {

            var wide = this.css('width').replace(/[^-\d\.]/g, '')*10;
            var high = this.css('height').replace(/[^-\d\.]/g, '')*10;

            var marg = - ( wide / 2 );

            $(this).unbind("click");
            $(this).animate({'width' : wide ,'height': high, 'margin-left': marg, 'bottom':'0' }, 3000, 'easeInOutCubic', function() {
                $(this).click(frontFunction);
            });

        };

        $('.back').click(backFunction);
    })(jQuery);

    var backFunction = function() {
        $(this).expand();
        $('.wall').animate({'bottom':'+=10px'}, 3000, 'easeInOutCubic');
    };

    var frontFunction = function() {
        $('.wall').animate({'bottom':'-=100px'}, 300);
        $('.floor').animate({'bottom':'-=100px'}, 300);
    };


});