jQueryのクリックイベントの中で条件文(if)が設定できない。画像の枚数が予め決まっていないスライドショー
目次
8時間かけて、JavaScriptとjQueryでスライドショーを作ろうと頑張ってみました。ですが、スライドが最後まで到達したときに、最初のスライドに戻すことができずに苦しんでおります。
クリックイベントの中でifが使えない
問題のコード
現在のコードはこちらです。スライドがある#tw_imgsをクリックすると、4枚の画像が消えたり表れたりするという流れです。
ファイル(新しいタブで開く)をサーバー上に置いてみましたので、ご興味のあるかたはクリックしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでスライドショー</title> <style> /* 一度画像を全てを非表示にして、absoluteを指定して画像を重ねる */ #tw_imgs img{ display:none; position: absolute; cursor: pointer; } /* 1枚目の画像だけを表示 */ #tw_imgs .img_num0{ display:block; } </style> </head> <body> <div id="tw_imgs"> <img class="tw_img img_num0" src="https://pbs.twimg.com/media/B-RbREuCYAA4F8I.jpg"> <img class="tw_img img_num1" src="https://pbs.twimg.com/media/B8vXg0kCAAEDfqC.jpg"> <img class="tw_img img_num2" src="https://pbs.twimg.com/media/B81PD8JCYAIl6kC.png"> <img class="tw_img img_num3" src="https://pbs.twimg.com/media/B81PD3KCQAA9TyY.png"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> function check(){ var image = document.getElementById("tw_imgs"); var num = image.getElementsByTagName("img"); var len = num.length; return len; } var n = check(); for (var i = 0; i <= n - 1; i++) { $(".tw_img").eq(i).click(function() { $(this).fadeOut(800); $(this).next().fadeIn(800); // (n - 1)回目のときは最初の画像に戻る if (i == (n - 1)) { console.log(1); } }); } </script> </body> </html>
if (i == (n – 1)) {}が動かない
今回、問題として挙げられる箇所は41行目です。i <= n - 1のときに、最初の画像に戻るという動作を実現させるつもりですが、それができません。
このコードで言えば、console.logとして”1″が表示されるはずですが、何も表示されません。
スライドの画像が4枚である意味
#tw_imgsでは、Twitterのツイートにある添付画像(新しいタブで開く)を呼び出すことを想定します。Twitterの仕様上、ひとつのつぶやきに対して、画像を最大4枚まで添付することができます。
従って、今回作成しているスライドショーは、予めスライドする枚数は決まっていません。imgタグの数を数えて、その数だけループで回す必要があります。そのためにfor文の中でクリックイベントを仕掛けています。
〔参考サイト〕