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