Question

我想要做的是创建窗口断点，例如300, 400, 500 当窗口到达某个断点时执行某个动作，理想情况下可能是：

300: function(){...}
400: function(){...}
500: function(){...}

以下代码是我试图只触发一次与某个断点关联的某个函数的方法，但实际上我被卡住了因为我不知道如何在里面动态传递它们一个小函数，因为我的代码中的所有断点看起来都很相同而且它们无用重复...

breakpoints = [300, 400, 500];

function screenBreakpoints(){
    var regex = / ?breakpoint[0-9] ?/;
    if( $(window).width() < breakpoints[0] ){
        if( !$('html').hasClass('breakpoint0') ){
            $('html')[0].className = $('html')[0].className.replace(regex, '');
            $('html').addClass('breakpoint0');
            console.log('breakpoint0');
            $('li.MOVING').insertBefore('ul li.one'); // breakpoint function (fires only one time)
        }
    }
    else if( $(window).width() > breakpoints[0] && $(window).width() < breakpoints[1] ){
        if( !$('html').hasClass('breakpoint1') ){
            $('html')[0].className = $('html')[0].className.replace(regex, '');
            $('html').addClass('breakpoint1');
            console.log('breakpoint1');
            $('li.MOVING').insertBefore('ul li.two'); // breakpoint function (fires only one time)
        }
    }
    else if( $(window).width() > breakpoints[1] && $(window).width() < breakpoints[2] ){
        if( !$('html').hasClass('breakpoint2') ){
            $('html')[0].className = $('html')[0].className.replace(regex, '');
            $('html').addClass('breakpoint2');
            console.log('breakpoint2');
            $('li.MOVING').insertBefore('ul li.three'); // breakpoint function (fires only one time)
        }
    }
    else if( $(window).width() > breakpoints[1] ){
        if( !$('html').hasClass('breakpoint3') ){
            $('html')[0].className = $('html')[0].className.replace(regex, '');
            $('html').addClass('breakpoint3');
            console.log('breakpoint3');
            $('li.MOVING').insertBefore('ul li.four'); // breakpoint function (fires only one time)
        }
    }
}

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

FIDDLE

Answer 1

首先，您使用jquery＆＃39; width()函数获取窗口width。

然后相应地为三个大小声明三个变量，并根据条件

在函数内写入函数

根据empty大小保留其他两个变量width并调用screenBreakpoints

注意：正如@flowtron在评论中所说，您可以根据您的要求在<=条件中使用>=或if

$(window).resize(function(){
var viewportWidth = $(window).width();
if(viewportWidth == 300){ // Use <= or >= based on ur requirements
    var   function300= function300(){};
    var function400 ='';
    var function500='';
    screenBreakpoints(function300,function400,function500);
}
else if(viewportWidth == 400){  // Use <= or >= based on ur requirements
    var   function400= function400(){};
    var function300 ='';
    var function500='';
    screenBreakpoints(function300,function400,function500);
}
else if(viewportWidth == 500){  // Use <= or >= based on ur requirements
    var   function500= function500(){
    var function300 ='';
    var function400='';
};
screenBreakpoints(function300,function400,function500);
}
});

然后在screenBreakpoints函数中检查哪个参数为empty

对于Ex：

function screenBreakpoints(function300,function400,function500){
       if( $(window).width() < breakpoints[0] ){
            if(function300 != null && function300 != undefined){
            if( !$('html').hasClass('breakpoint0') ){
                $('html')[0].className = $('html')[0].className.replace(regex, '');
                $('html').addClass('breakpoint0');
                console.log('breakpoint0');
                $('li.MOVING').insertBefore('ul li.one'); // breakpoint function (fires only one time)
            }
           }
        }
}

Answer 2

在我的工作中，我来使用一组DIV（通常是隐形的，而不是通过display: none！），其ID为“ThisIsMediaQuery_Alpha”，.. Beta，Gamma ..但是你要命名它们并且你需要多少 - 那么你感兴趣的每个断点都必须从最初得到的默认设置中修改其中一个 - 我通常使用背景颜色（从创建它们到FIX使用MediaQuery时的遗留颜色）并且可见），但你喜欢的任何东西都可以真正起作用。然后只需在whichMediaQueryIsThis()上调用$(window).resize()，它会迭代DIV并找出哪个具有“标记值”（例如cur.style.backgroundColor=="red"）。然后，只需使用case在调用manageMediaQuerySwitch(arg0,arg1,arg2)函数时切换出适当的值。 HTH

这样做的好处是，它也适用于不是面向像素的MediaQueries！ ; - ）

Answer 3

这是从jsfiddle对js文件进行的完整编辑你提供的。只需将其粘贴到那里，或者只需运行此jsfiddle即可。我发现它有效。我正在做的是，我只是制作一个功能并用不同的参数调用它。

这是你修改过的js

breakpoints = [300, 400, 500];
function screenBreakpoints(breakpoint,listName){
    var regex = / ?breakpoint[0-9] ?/;
        if( !$('html').hasClass(breakpoint) ){
            $('html')[0].className = $('html')[0].className.replace(regex, '');
            $('html').addClass(breakpoint);
            console.log(breakpoint);
            $('li.MOVING').insertBefore(listName); // breakpoint function (fires only one time)
        }
}    
$(window).resize(function(){
    if( $(window).width() < breakpoints[0] ){
        screenBreakpoints("breakpoint0","ul li.one");
    }
    else if( $(window).width() < breakpoints[1] ){
        screenBreakpoints("breakpoint1","ul li.two");        
    }
    else if( $(window).width() < breakpoints[2] ){
        screenBreakpoints("breakpoint2","ul li.three");        
    }
    else{
        screenBreakpoints("breakpoint3","ul li.four");
    }
});

window onresize在Jquery

3 个答案: