Question

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

我将类命名为“返回”，然后应用此函数放大并移动div。完成此动画后，我会删除“返回”类并添加“前”类。

我有另一个函数正在寻找单击'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就绪处理程序。 $(function ($) {只是具有本地范围$(document).ready(的{{1}}的快捷方式。虽然嵌套DOM就绪处理程序是无害的，但它是一种浪费（因为内部立即触发）

使用这两个：

$

或

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

Answer 2

问题是浏览器会读取所有处理程序并应用其中的页面已加载。因此将处理程序设置为类是错误的。 Class只是用于查找特定DOM元素的说明符

我建议您使用下一个解决方案在任何父元素上使用 on 事件并将处理程序应用于它

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

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

因此，每次单击触发元素时，它都会传播到带有处理程序的元素，并将搜索使用特定选择器（类.back或.front）调用完全回调

Answer 3

您已向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);
    };


});

jQuery无法识别元素

3 个答案: