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);
    };


});