jquery.inviewで画面外に出た要素のクラスを削除したい

現在こちらのページを参考にしまして、DIVが画面内に入ったときに特定クラスを追加するコードをjquery.inviewプラグインを用いて実装しております。

下記コードで、「test」というクラス名を持つDIVが画面内に入ったときに、画面内に入ったDIVにだけクラス「show」を追加することができました。

そして次に行いたいことは、画面外に出たDIVから、追加した「show」を削除したいというものです。
すなわち、常に画面上に表示されているDIVにだけ「show」が付いてる状態にしたいということです。

画面外に出たDIVから「show」を削除するためのコードをどのようにして書けば良いのか分からず、よろしくお願いいたします。

HTML
1<head>
2  <script type="text/javascript" src="js/jquery.inview.js"></script>
3</head>
4
5<body>
6  <div class="test"></div>
7  <div class="test"></div>
8  <div class="test"></div>
9  <div class="test"></div>
10  <div class="test"></div>
11  <!--さらに同様のDIVが続く-->
12</body>

JavaScript
1  $('.test').on('inview', function() {
2    // この要素が画面内に入ったとき次の処理を実行
3    $(this).addClass('show');
4  });

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

回答1件

ベストアンサー

配布元のGitHubにこのような記述がありましたが、試されましたか？
if内にaddClass()、else内に同じようにremoveClass()を書いてあげるだけです。

JavaScript
1$('div').on('inview', function(event, isInView) {
2  if (isInView) {
3    // element is now visible in the viewport
4  } else {
5    // element has gone out of viewport
6  }
7});

jquery.inview - GitHub
https://github.com/protonet/jquery.inview/blob/master/README.md

投稿2017/11/03 01:59

編集2017/11/03 02:00

退会済みユーザー

総合スコア0

agepan

2017/11/03 02:15

ご回答ありがとうございました！サイト検索はしてましたが、肝心な公式のドキュメントを見過ごしておりました… 上記で試しましたところ、バッチリ動きました！ありがとうございました！

dodox86

2017/11/04 11:32

コメントありがとうございます。他の例ですが、4バイト迄のデータであれば例えばunsigned longの変数1つにパックしてしまい、変数1つでビット演算するほうがループをまわすのも簡単になって良いこともあります。場合に応じてどうぞ。例： int main() { unsigned char array[3] = { 0x81, 0x23, 0x45 }; unsigned char* expo = array; unsigned long ul = *expo << 16 | *(expo + 1) << 8 | *(expo + 2); printf("ul=0x%08lX\n", ul); return 0; } 実行結果 ul=0x00812345

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