【jQuery】if文で特定の要素がウィンドウ内に来た時にクラスを付与する

初心者の質問で申し訳ございません。
jQueryでウィンドウ内に特定の要素があった場合、addClassでクラスを付与したいと思っております。

動くは動くのですが、下記のif文の使い方がおかしいかどうかが気になり質問させて頂きました。

$(function(){
  var aaa = $(".aaa");
  var bbb = $(".bbb");
  var ccc = $(".ccc");

  $(window).scroll(function(){
    var scroll = $(window).scrollTop();//スクロールの値を取得
    var positionA = $(aaa).offset().top - $(window).height();//要素の位置を取得
    var positionB = $(bbb).offset().top - $(window).height();//要素の位置を取得
    var positionC = $(ccc).offset().top - $(window).height();//要素の位置を取得

    if(positionA < scroll){$(".aaa").addClass("animate");} 
    if(positionB < scroll){$(".bbb").addClass("animate");}
    if(positionC < scroll){$(".ccc").addClass("animate");}

  });
});

もっとシンプルに書く方法、他に良い方法などありましたら
皆様はどう書くかを教えて頂ければ嬉しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

if の使い方については、特に悪いことはありません。問題ないです。

繰り返し同じコードを書いているのは、DRYではないので、以下のように書いてはいかが？

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.contents {
8				border: 1px solid #CCC;
9				height: 600px;
10			}
11			.animate {
12				background: red;
13			}
14		</style>
15	</head>
16	<body>
17		<div>
18
19			<div class="contents aaa"></div>
20			<div class="contents bbb"></div>
21			<div class="contents ccc"></div>
22
23		</div>
24		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
25		<script type="text/javascript">
26			$(function () {
27				$(window).scroll(function () {
28					var selectors = $('.aaa, .bbb, .ccc');
29					var scroll = $(window).scrollTop();
30					selectors.each(function () {
31						var position = $(this).offset().top - $(window).height();
32						if (position < scroll) {
33							$(this).addClass("animate");
34						}
35					});
36				});
37			});
38		</script>
39	</body>
40</html>

もっとDRYに

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.contents {
8				border: 1px solid #CCC;
9				height: 600px;
10			}
11			.animate {
12				background: red;
13			}
14		</style>
15	</head>
16	<body>
17		<div>
18
19			<div class="contents"></div>
20			<div class="contents"></div>
21			<div class="contents"></div>
22
23		</div>
24		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
25		<script type="text/javascript">
26			$(function () {
27				$(window).scroll(function () {
28					var selectors = $('.contents');
29					var scroll = $(window).scrollTop();
30					selectors.each(function () {
31						var position = $(this).offset().top - $(window).height();
32						if (position < scroll) {
33							$(this).addClass("animate");
34						}
35					});
36				});
37			});
38		</script>
39	</body>
40</html>

投稿2015/11/07 16:51

編集2015/11/07 16:55

退会済みユーザー

総合スコア0

qqb

2015/11/08 23:52

わざわざご丁寧にありがとうございます！こういう回答を待っていました！勉強になります。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する