javascript - 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 类的元素 引起的。即使您更改了类，处理程序仍会附加到这些特定元素。

随着类的动态变化，使用委托(delegate)事件处理程序附加到不变的祖先元素(如果没有其他更接近/方便的话，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);
});

委托(delegate)事件通过监听事件冒泡到目标祖先元素(在本例中为 document)来工作，然后它们应用 jQuery 选择器到只有气泡链中的元素，然后它将函数应用于任何匹配的元素实际导致事件。

基本上，他们在事件时间评估选择器，而不是事件注册时，因此使用动态更改/添加的内容。

旁注:

您嵌套了两个 DOM 就绪处理程序。 $(function ($) { 只是 $(document).ready( 的快捷方式，具有局部范围的 $。虽然嵌套 DOM 已准备就绪handlers 是无害的，这是一种浪费(因为内部的会立即触发)

只使用这个:

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

或

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