0
我正在尝试使用自动调整大小和自动查看功能调查网站。 因此，人们会根据屏幕尺寸查看最少1个调查问题和最多3个调查问题。jQuery调查自动调整大小/自动查看不起作用
我有下面的代码，但调整大小后，下一个EN前一个按钮将无法正常工作更多。我尝试了几乎所有的东西，但我不能让它正常工作。
<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>
我希望你们能帮助我，因为我打破了我的大脑两天吧！
谢谢你的快速反应Vibhu！ 仍然是相同的结果。 它起初工作正常。但是当我调整屏幕大小后点击下一个按钮它将从div1 + div2转到div9。 它必须与'firstdiv'或'divnumber'的值有关，但我只是看不到什么... – DutchFlow
在我的浏览器中运行你的代码（没有style.css），当我恢复它显示一个控件，并在最大化它显示两个控件..所以jQuery似乎工作，也许问题可能与内心的价值，不能真正地说： - ） – Vibhu