javascript - 在另一个回调中运行 jQuery 函数时出现问题

Question

在加载图像、调整大小并隐藏一些元素后尝试淡入容器，但遇到了问题。

我的控制台没有显示任何错误..但函数没有执行

注释掉的代码完美运行。

测试站点:

http://brantley.dhut.ch/

JavaScript:

/*jQuery(function($) {
    $('.z').respond();
});*/

$(document).ready(function() {
    //$('#two, #three, #four').hide();
    //$('#main').fadeIn('slow');

    $('.z').respond(function() {
        $('#two, #three, #four').hide();
        $('#main').fadeIn('slow');
    });

    $('.z').click(function() {
        var slide = $(this);
        slide.fadeOut(600, function() {
            slide.next().fadeIn(600);
            slide.insertAfter('.z:last');
        });
    });
});

插件:

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

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).load(function() {     
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {
            return pic.each(function() {

            /* declare variables */
                var browserWidth = $(window).width();
                var imgRatio = $(this).width() / $(this).height()
                var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
                var browserRatio = browserWidth / availableHeight

                /* image sizing logic */
                if (browserRatio >= imgRatio) {
                    if (browserWidth > 640) {
                        /* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
                        $(this).height(availableHeight).width('auto');
                        //$('body').css('background', 'blue');
                    } else {
                        /* it's mobile */
                        $(this).width(browserWidth - 40).height('auto');
                        //$('body').css('background', 'red');
                    }
                } else {
                    /* if the browser is portrait, set the image's width to fill the page */
                    $(this).width(browserWidth - 40).height('auto');
                    //$('body').css('background', 'green');
                }

                /* horizontally center content */
                $(this).css('margin-left', (browserWidth - $(this).width())/2);

            });

        };

    };
})( jQuery );

Answer 1

您的插件没有定义回调，这就是为什么没有发生任何事情。

更改:$.fn.respond = function() {

至:$.fn.respond = 函数(回调){

并在插件末尾添加:callback();。