javascript - 将状态传递给调整大小函数

Question

我正在尝试创建一个 Demo -
1.(登陆)检查浏览器大小>更改多边形大小
2. 单击 按钮 > 更改多边形大小(较小)
3. 调整浏览器大小 > 更改多边形大小
4. 调整浏览器大小 > 检查之前是否已单击按钮至较小模式 > 将多边形大小更改为较小

我陷入了 4。我不知道如何将调整大小之前的状态传递到调整大小之后。它会再次计算。

如有任何建议，我们将不胜感激。

演示

$(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