Q&A
これはHTMLの提示が必須の質問では？
前提・実現したいこと
ボタンがそれぞれのページ（Fpage）に一つずつ、#button1~#button4まであります(最終ページはボタン無し)。 Fpage[0]の#button1をクリックしたら、Fpage[1]に移動できるようにしたいです。
jQueryはfor文の中に入れられないらしいですが、どのようにしたらループ処理が出来るのでしょうか？
プログラミング初心者です。何卒宜しくお願い致します。
該当のソースコード
html
1<div id="page1"> 2 <h1>page1</h1> 3 <div id="button1" class="button"></div> 4</div> 5 6<div id="page2"> 7 <h1>page2</h1> 8 <div id="button2" class="button"></div> 9</div> 10 11<div id="page3"> 12 <h1>page3</h1> 13 <div id="button3" class="button"></div> 14</div> 15 16<div id="page4"> 17 <h1>page4</h1> 18 <div id="button4" class="button"></div> 19</div> 20 21<div id="page5"> 22 <h1>page5</h1>
javascript
1const Fpage= ['#page1', '#page2', '#page3', '#page4', '#page5]; 2 3 4 for(let index = 1; index < 5; index++){ 5 $('#button' + index).click(function(){ 6 $(Fpage[0]).fadeOut('fast'); 7 $(Fpage[1]).fadeIn(); 8 Fpage.shift; 9 }); 10 }
css
1#page2{ 2 display:none; 3} 4#page3{ 5 display:none; 6} 7#page4{ 8 display:none; 9} 10#page5{ 11 display:none; 12}
回答1件
0
ベストアンサー
これは配列でやることではなくクラスなど同じ属性でグルーピングするとよいです
javascript
1<style> 2.page:nth-child(n+2){display:none;} 3</style> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5<script> 6$(function(){ 7 $('.page').on('click',function(){ 8 var idx=$('.page').index(this); 9 $(this).fadeOut().queue(function(){ 10 $('.page').eq(idx+1).fadeIn().dequeue(); 11 }); 12 }); 13}); 14</script> 15<div id="page1" class="page"> 16 <h1>page1</h1> 17</div> 18<div id="page2" class="page"> 19 <h1>page2</h1> 20</div> 21<div id="page3" class="page"> 22 <h1>page3</h1> 23</div> 24<div id="page4" class="page"> 25 <h1>page4</h1> 26</div> 27<div id="page5" class="page"> 28 <h1>page5</h1> 29</div>
ボタン(?)が何をしたいかわからないので省きました
page5はそれ以降ループしなくてもいいのでしょうか＞
投稿2020/07/11 05:00
総合スコア116724
ありがとうございます。クラスで出来るのですね！
page5以降はループしなくて良いです。
追加で質問です。答えでは、ページ上をクリックしたらページが変異しますが、'.button'をクリックしたらページが変異するにはどうしたら良いのでしょうか？下に書いてみましたが、うまく作動しません。教えていただけると幸いです。
<!DOCTYPE html>
<html>
<style>
.page:nth-child(n+2){display:none;}
.button{
height:50px;
width:50px;
background-color:blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.button').on('click',function(){
var idx=$('.page').index(this);
$(this).parent().fadeOut().queue(function(){
$('.page').eq(idx+1).fadeIn().dequeue();
});
});
});
</script>
<div id="page1" class="page">
<h1>page1</h1>
<div class="button"></div>
</div>
<div id="page2" class="page">
<h1>page2</h1>
<div class="button"></div>
</div>
<div id="page3" class="page">
<h1>page3</h1>
<div class="button"></div>
</div>
<div id="page4" class="page">
<h1>page4</h1>
<div class="button"></div>
</div>
<div id="page5" class="page">
<h1>page5</h1>
</div>
こんな感じですかね
$(function(){
$('.button').on('click',function(){
var idx=$('.page').index($(this).closest('.page'));
$('.page').eq(idx).fadeOut().queue(function(){
$('.page').eq(idx+1).fadeIn().dequeue();
});
});
});
ありがとうございます。おやすみになられているかと思い、別の所で質問しました。ごめんなさい。今後はそのような事はしません。
idxに.indexで".page"の順番を入れる。.parentではなく.closestで押した".button"の親要素を取得。
.eqで”.page”の順番を数え"idx"を当てはめて、fadeOutで消す。
普通に閉じてから関連の質問をするのは問題ないですよ
二箇所同じ質問があるとどちらに回答するべきかわからなくなるので
あなたの回答
tips
プレビュー
