Question

我试图制作Demo -
1.（着陆）检查浏览器大小＆gt;更改多边形尺寸
2.单击按钮＆gt;更改多边形尺寸（更小）
3.调整浏览器大小＆gt;更改多边形尺寸
4.调整浏览器大小＆gt;在＆gt;之前检查是否已将按钮点击为较小模式将多边形大小更改为更小

我陷入了困境中。我无法想象如何在调整大小之后将之前的状态传递给我。它会再次计算。

任何建议都将不胜感激。

Demo

$(function(){
var adivide=0;
var winwid = $(window).width();
function setadivide(){  
    winwid = $(window).width(); 
    if(winwid > 800){
        adivide = 8;
    }
    else{
        adivide = 4;
    }
    console.log(adivide);
};
setadivide();

var awidth;
function acal(){
    awidth = parseInt( winwid / adivide);
};
acal();
function setawidth(){
    $('.a').css({width: awidth, height: awidth});
};
setawidth();

//****** button
//set btn visibility
function btnvis(){
    switch(adivide){
        case 4:
            $('.plus').show();
            $('.minus').hide();
        break;
        case 8:
            $('.plus').show();
            $('.minus').hide();
        break;
    }
};
btnvis();
//click btn update adivide and set btn visibility
function btnclick(){
    $('.plus').click(function(){
        switch(adivide){
            case 4:
                adivide = adivide -2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').hide();
                $('.minus').show();
            break;
            case 8:
                adivide = adivide - 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').hide();
                $('.minus').show();
            break;
        }
    });
    $('.minus').click(function(){
        switch(adivide){
            case 2:
                adivide = adivide + 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').show();
                $('.minus').hide();
            break;
            case 6:
                adivide = adivide + 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').show();
                $('.minus').hide();
            break;
        }
    });
};
btnclick();
//end button ******
$(window).resize(function(){
    setadivide();
    acal();
    setawidth();
    //****** button
    btnvis();
    //end button ******
});
});

Answer 1

（编辑答案）

修改您的setadivide函数以考虑当前adivide值（即当前状态）：

function setadivide(){    
    winwid = $(window).width();    
    if(winwid > 800){
        if (adivide == 2)
           adivide = 6;
        else if (adivide != 6)
           adivide = 8;
    }
    else{
        if (adivide == 6)
           adivide = 2;
        else if (adivide != 2)
           adivide = 4;
    }
    console.log(adivide);
};

Modified demo

将状态传递给调整大小功能

1 个答案: