1. TOP
  2. Webサービス
  3. JavaScript
  4. jQueryのクリックイベントの中で条件文(if)が設定できない。画像の枚数が予め決まっていないスライドショー

jQueryのクリックイベントの中で条件文(if)が設定できない。画像の枚数が予め決まっていないスライドショー

|

calculator

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文の中でクリックイベントを仕掛けています。

〔参考サイト〕