Question

我正在尝试box宽度和btn位置，更改取决于window width。
Q1。如何删除滚动条后面的white space？（我已经设定了100％..）

Q2。点击btn 2次后返回蓝色，btn位置与之前不同。怎么解决？（我设置console.log以检查点击btn window width是否会有所不同，为什么？）

jsFiddle
任何建议将不胜感激，谢谢。

$(function(){
    //set column amount
    var colamt=0;
    var winwid = $(window).width();
    function setcolamt(){
        winwid = $(window).width();    
        console.log(winwid);
        if(winwid > 300){
            if(colamt !== 8){
                colamt = 6;
            }
        }
        console.log(colamt);
    };
    setcolamt();
    //set column width
    var colwid;
    function setcolwid(){
        //set column width
        colwid = 100 / colamt + "%";
        console.log(colwid);
    };
    setcolwid();
    //set img width
    function setimgwid(){
        $('.box').css({width: colwid});
    };
    setimgwid();
    // ****** button
    //set button postion
    var boxwid;
    function setbtnpos(){
        boxwid = $('.box').width();
        console.log(boxwid);
        $('.colamtminus').css({top: boxwid * 2});
        $('.colamtplus').css({top: boxwid * 2});    
    };
    setbtnpos();
    //set button visibility when landing
    function visbtnchangecolamt(){
        if(winwid > 300){
            if(colamt == 8){
                $('.colamtplus').show();
                $('.colamtminus').hide();
            }
            else{
                $('.colamtplus').hide();
                $('.colamtminus').show();
            }
        }
    };
    visbtnchangecolamt();
    //click button update colamt and set button visibility
    function setbtnchangecolamt(){
        winwid = $(window).width();    
        $('.colamtplus').click(function(){
            if(winwid > 300){
                colamt = 6;
            }
            setcolamt();
            setcolwid();
            setimgwid();
            setbtnpos();
            visbtnchangecolamt();
            $('.colamtplus').hide();
            $('.colamtminus').show();
        });
        $('.colamtminus').click(function(){
            winwid = $(window).width();    
            if(winwid > 300){
                colamt = 8;
            }
            setcolamt();
            setcolwid();
            setimgwid();
            setbtnpos();
            visbtnchangecolamt();
            $('.colamtplus').show();
            $('.colamtminus').hide();
        });
    };
    setbtnchangecolamt();
});

Answer 1

不要在setbtnchangecolamt（）;

中加载setcolamt（）

更改obj宽度和位置取决于窗口宽度

1 个答案: