Question

我使用Masterslider为图像轮播提供动力。

对于桌面版，我希望脚本能够运行layout: 'autofill'。对于移动设备，我希望脚本能够运行layout: 'boxed'。

为实现这一目标，我正在使用带有Modenizr mq的窗口.resize()：

( function( $ ) {

    $( window ).resize(function() {
        if (Modernizr.mq('(max-width: 767px)')) {

            var slider = new MasterSlider();
            slider.setup('masterslider' , {
                width: 1440,    // slider standard width
                height: 400,   // slider standard height
                space: 5,
                layout: 'boxed',
            });

            // adds Arrows navigation control to the slider.
            slider.control('arrows');

        } else {

            var slider = new MasterSlider();
            slider.setup('masterslider' , {
                width: 1440,    // slider standard width
                height: 400,   // slider standard height
                space: 5,
                layout: 'autofill',
            });

            // adds Arrows navigation control to the slider.
            slider.control('arrows');

        }
    }).resize();

} )( jQuery ); // End JQuery

此方法似乎多次触发脚本，并在控制台中出现以下多个错误：

Uncaught TypeError: Cannot read property 'position' of undefined

我应该如何只运行一次脚本，在调整大小时调用布局运算符？

Answer 1

与另一位开发人员交谈时，我们提出了以下解决方案：

( function( $ ) {

    var slider = new MasterSlider();

    var changeSetup = function(){

    if (Modernizr.mq('(max-width: 767px)')) {

        slider.setup('masterslider' , {
            width: 1440,    // slider standard width
            height: 400,   // slider standard height
            space: 5,
            layout: 'boxed',
        });

        // adds Arrows navigation control to the slider.
        slider.control('arrows');
    } 

    else {

        slider.setup('masterslider' , {
        width: 1440,    // slider standard width
        height: 400,   // slider standard height
        space: 5,
        layout: 'autofill',
    });

    // adds Arrows navigation control to the slider.
            slider.control('arrows');
        }
    };

    changeSetup();

    $( window ).resize(function(){
        changeSetup();
    });

} )( jQuery ); // End JQuery

使用JQuery窗口调整大小和媒体查询一次

1 个答案: