Question

我正在尝试制作一个包含自动尺寸和自动查看功能的调查网站。因此，人们将根据屏幕尺寸看到最少1个调查问题和最多3个调查问题。

我有以下代码，但在调整下一个前一个按钮后，将不再正常工作。我几乎尝试了所有东西，但我无法让它正常工作。

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">
        var firstdiv;
        var divs = [];
        var view;

        $(document).ready(function () { 
            $("#container").find("div").each(function(){ divs.push(this.id); });
            firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));
            InitalizeSizes();
        });

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

        function InitalizeSizes() {
            for (i = 0; i <= divs.length; i++) {
                $("#"+divs[i]).hide();
            }

            if(window.innerHeight <= 716){
                $("#"+divs[firstdiv]).show();
                view = 1;
            }
            else if(window.innerHeight > 716 && window.innerHeight <= 1067){
                $("#"+divs[firstdiv]).show();
                $("#"+divs[firstdiv+1]).show();
                view = 2;
            }
            else{
                $("#"+divs[firstdiv]).show();
                $("#"+divs[firstdiv+1]).show();
                $("#"+divs[(firstdiv+2)]).show();
                view = 3;
            }

            var divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs));

            $("#btnnext").click(function(){
                if( !($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().is('div:last')) ){
                    divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs));
                    for (i = 0; i < divs.length; i++) {
                            $("#"+divs[i]).hide();
                    }
                    for (i = 1; i <= view; i++) {                       
                        $("#"+divs[(divnumber+i)]).show();

                    }
                };
            });

            $("#btnback").click(function(){
                if( !($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().is('div div:first')) ){
                    divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));
                    for (i = 0; i < divs.length; i++) {
                            $("#"+divs[i]).hide();
                    }
                    for (i = 1; i <= view; i++) {                       
                        $("#"+divs[(divnumber-i)]).show();
                    }
                }
            });

        }
    </script>           
</head>
<body>
    <form id="containerform" action="#">
        <div id="container">
            <div id="div1"><br /><label>Div1</label><input type="text" name="username" /></div>
            <div id="div2"><br /><label>Div2</label><input type="password" name="password" /></div>
            <div id="div3"><br /><label>Div3</label><input type="text" name="email" /></div>
            <div id="div4"><br /><label>Div4</label><input type="text" name="username" /></div>
            <div id="div5"><br /><label>Div5</label><input type="password" name="password" /></div>
            <div id="div6"><br /><label>Div6</label><input type="text" name="email" /></div>                
            <div id="div7"><br /><label>Div7</label><input type="text" name="username" /></div>
            <div id="div8"><br /><label>Div8</label><input type="password" name="password" /></div>
            <div id="div9"><br /><label>Div9</label><input type="text" name="email" /><input type="submit" value="verzonden"/></div>
            <p id="buttons"><button id="btnback">Previous</button><button id="btnnext">Next</button></p>
        </div>
    </form>
</body>

我希望你们能帮助我，因为我现在已经绞尽脑汁了两天！

Answer 1

您可以尝试使用css，看看是否有效

//hide
$("#"+divs[i]).css("display","none");
//show
$("#"+divs[i]).css("display","inline");

Answer 2

好的，我找到了！那里有多个问题。

就像<p id="buttons">必须不一样，因为它会让IE和Edge明显地哭泣。

$(window).resize(function()应该是$(window).on('resize',function()，应该放在$(document).ready(function ()。

此外，按钮点击function InitializeSizes()应放在$(document).ready(function ()。

中

这样就产生了以下代码：

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">
        var divs = [];
        $("#container").find("div").each(function(){ divs.push(this.id); });
        var firstdiv;
        firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') != 'none';}).first().attr('id'), divs));    
        var view;
        var divnumber;      

        $(document).ready(function () { 
            $("#container").find("div").each(function(){ divs.push(this.id); });
            InitalizeSizes();
            divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs));

            $("#btnnext").click(function(){             
                if( !($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().is('div:last')) ){
                    divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs));
                    for (i = 0; i < divs.length; i++) {
                            $("#"+divs[i]).css("display","none");
                    }
                    for (i = 1; i <= view; i++) {                       
                        $("#"+divs[(divnumber+i)]).css("display","table-row");
                        firstdiv = divnumber;
                    }
                }
            }); 

            $("#btnback").click(function(){

                if( !($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().is('div div:first')) ){
                    console.log(jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));
                    divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));
                    for (i = 0; i < divs.length; i++) {
                            $("#"+divs[i]).css("display","none");
                    }
                    for (i = 1; i <= view; i++) {                       
                        $("#"+divs[(divnumber-i)]).css("display","table-row");
                    }
                }
            });

            $(window).on('resize',function(){
                firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));   
                InitalizeSizes();
            }); 


            function InitalizeSizes() {
                firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs));
                for (i = 0; i <= divs.length; i++) {
                    $("#"+divs[i]).css("display","none");
                }

                if(window.innerHeight <= 716){
                    $("#"+divs[firstdiv]).css("display","table-row");
                    view = 1;
                }
                else if(window.innerHeight > 716 && window.innerHeight <= 1067){
                    $("#"+divs[firstdiv]).css("display","table-row");
                    $("#"+divs[(firstdiv+1)]).css("display","table-row");
                    view = 2;
                }
                else{
                    $("#"+divs[firstdiv]).css("display","table-row");
                    $("#"+divs[(firstdiv+1)]).css("display","table-row");
                    $("#"+divs[(firstdiv+2)]).css("display","table-row");
                    view = 3;
                }                   
            }   
        }); 

    </script>           
</head>
<body>
    <form id="containerform" action="#">
        <div id="container">
            <div id="div1"><br /><label>Div1</label><input type="text" name="username" /></div>
            <div id="div2"><br /><label>Div2</label><input type="password" name="password" /></div>
            <div id="div3"><br /><label>Div3</label><input type="text" name="email" /></div>
            <div id="div4"><br /><label>Div4</label><input type="text" name="username" /></div>
            <div id="div5"><br /><label>Div5</label><input type="password" name="password" /></div>
            <div id="div6"><br /><label>Div6</label><input type="text" name="email" /></div>                
            <div id="div7"><br /><label>Div7</label><input type="text" name="username" /></div>
            <div id="div8"><br /><label>Div8</label><input type="password" name="password" /></div>
            <div id="div9"><br /><label>Div9</label><input type="text" name="email" /><input type="submit" value="verzonden"/></div>
        </div>
    </form>
    <p id="buttons"><button id="btnback">Previous</button><button id="btnnext">Next</button></p>
</body>

这适用于跨浏览器（我在Firefox，Chrome，IE和Edge上测试过）。

Answer 3

您可以使用以下脚本实现所需的行为：

set = function (page, width, elements) {

    // Hide every element

    elements.hide();

    // Find number of elements per page

    var n = 1;

    if (width >= 716 && width <= 1076) {
        n = 2;
    } else if (width > 1076) {
        n = 3;
    }

    // Show elements of current page

    var total = elements.length;        
    var start = (page - 1) * n;

    var l = start + n <= total ? start + n : total;

    for (var j = start; j < l; j++) {
        $(elements[j]).show();
    }
};

$(document).ready(function () {

    // Set variables

    var page = 1;
    var width = $(document).width();
    var elements = $('#container div');

    var first = $(elements[0]);
    var last = $(elements[elements.length - 1]);

    // Set page content

    set(page, width, elements);

    // Set event listeners

    $(window).resize(function () {
        width = $(document).width();
        page = 1;
        set(page, width, elements);
    });

    $('#btnback').click(function () {
        if (!first.is(':visible')) {
            page--;
            set(page, width, elements);
        }
    });

    $('#btnnext').click(function () {
        if (!last.is(':visible')) {
            page++;
            set(page, width, elements);
        }
    });
});

jQuery调查自动大小/自动查看无法正常工作

3 个答案: