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

Question

我正在使用jQuery cycle2和carousel插件在我的网站上显示一些事件.这一切都很好但我希望可见选项在平板电脑(768px和1030px之间)上从5变为3,然后在手机上变为1(小于768px).所有其他选项可以保持不变.这段代码被黑客攻击并且混乱,所以我正在寻找一种更好的方法来实现它.此外,目前它只适用于刷新.这很好,但如果重新加载并在调整大小时实时工作会很好.这是我目前的代码:

// 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'
        });
    }
}

Answer 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'
    });
}