如何将这个凌乱的 jQuery 转换为不那么臃肿和响应答案

【问题标题】：How can I convert this messy jQuery to be less bloated and responsive如何将这个凌乱的 jQuery 转换为不那么臃肿和响应
【发布时间】：2013-11-08 00:54:54
【问题描述】：

我正在使用 jQuery cycle2 和 carousel 插件在我的网站上显示一些事件。这一切都很好，但我希望平板电脑上的可见选项从 5 变为 3（768 像素和 1030 像素之间），然后在手机上降至 1（小于 768 像素）。所有其他选项都可以保持不变。这段代码被黑在一起而且很乱，所以我正在寻找一种更好的方法来做到这一点。此外，目前它仅适用于刷新。这很好，但如果它在您调整大小时重新加载并实时工作，那就太好了。这是我当前的代码：

// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
    adjustEvents();
})
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustEvents();
});

var adjustEvents = function() {
    if (ww > 1030) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:5,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    } 
    else if (ww >= 768) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:3,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    }
    else if (ww < 768) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:1,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    }
}

【问题讨论】：

将 bind 调用移动到您的 .ready() 处理程序中。
@Mathletics - 为什么？那绝对不会做任何事情。
@Adam ha，你说得对！我已经习惯将所有内容都保存在 ready 处理程序中，我忘记了为什么。归咎于睡眠不足？

标签： javascript jquery jquery-cycle

【解决方案1】：

$(document).ready(adjustEvents);
$(window).on('resize orientationchange', adjustEvents);

function adjustEvents() {
    var ww  = document.body.clientWidth,
        vis = ww > 1030 ? 5 : (ww >= 768 ? 3 : 1);
    $('.cycle').cycle({
        fx              : 'carousel',
        swipe           : true,
        timeout         : 5000,
        slides          : '> article',
        carouselVisible : vis,
        carouselFluid   : true,
        autoHeight      : 'calc',
        prev            : '#prev',
        next            : '#next'
    });
}

【讨论】：

不错 - 比我的更整洁。
谢谢！完美运行。有什么方法可以在实际调整大小而不是重新加载时重新初始化？

【解决方案2】：

这是代码的“修剪”版本...

// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
    adjustEvents();
})
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustEvents();
});

var adjustEvents = function() {
    var options = {
        fx:'carousel',
        swipe:true,
        timeout:5000,
        slides:'> article',
        carouselFluid:true,
        autoHeight:'calc',
        prev:'#prev',
        next:'#next'
    }

    if (ww > 1030) {
        options.carouselVisible = 5;
    } 
    else if (ww >= 768) {
        options.carouselVisible = 3;
    }
    else if (ww < 768) {
        options.carouselVisible = 1;
    }
    $('.cycle').cycle(options);
}

我真正做的只是创建一个变量来存储循环选项，并且只更改与每个宽度相关的 1 属性。

【讨论】：