jQuery无法识别元素上类的变化

jQuery not recognising change of class on element

本文关键字：变化 元素 识别 jQuery      更新时间：2023-09-26

好的，所以我创建了一个自定义函数，然后我可以使用div的类调用它。

我的目标是类'back'，然后这个函数被应用，扩大和移动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

这个问题是由于在加载时将事件处理程序静态地附加到具有。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就绪处理程序。$(function ($) {只是$(document).ready(的快捷方式，具有局部作用域的$。尽管嵌套DOM就绪处理程序是无害的，但这是一种浪费(因为内部处理程序会立即触发)

使用

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

或

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

问题是浏览器读取所有处理程序并应用其加载的页面。所以设置handler为class是错误的。类是查找特定DOM元素的唯一说明符

我建议你使用下一个解决方案在任何父元素的事件上使用，并对其应用处理程序

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

所以每次你的点击触发了元素，它传播到元素的处理程序，并将搜索调用确切的回调与特定的选择器(类。back或。front)

您已经向DOM元素添加了一个侦听器。更改元素类不会删除已经附加的侦听器。与您尝试过的类最接近的解决方案是这样的:

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

});
相关文章：