0
私は、自動サイズと自動表示機能を備えたアンケートのウェブサイトを作成しようとしています。 そのため、画面サイズに基づいて、アンケートの質問は1件、質問の件数は最大3件まで表示されます。jQuery調査自動サイズ/自動表示が機能しない
私は次のコードを持っていますが、次の前のボタンのサイズを変更しても、それ以上は正しく動作しません。私はほとんどすべてを試みたが、私はそれが正しく動作するようにすることはできません。
<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なしで） 1つのコントロールとそれを最大化することは2つのコントロールを示しているので、jQueryはうまく動作しているようですが、おそらく問題は内部の高さの値であるかもしれません。 – Vibhu