いつもお世話になっております。
現在RailsでWebページを作成しております。
kaminari + jscrollで無限スクロールを実現しており、下までスクロールされると次の部分が次々によまれていくような形になっております(twitterのようなイメージ)。
以下コードのように、user情報を次々と表示していくのですが、一つのユーザーの項目は基本的に省略表示(.statusのみ)されており、始めは下で言うxxx、yyy、zzzの3つの項目が表示されており、「表示する」ボタンを押すことで、aaa~eeeの情報(.status_more)が表示されるような形になっています。追加情報が表示されると「非表示に戻す」ボタンとなり、ボタンを押すと情報が再び隠れます。
ページ更新後、最初に表示されている部分は問題ないのですが、一番下までスクロール後、次の部分を表示する際に、追加情報が最初から表示されている状態となってしまいます。
現状以下のように書いているのですが、うまく動かずこちらに質問させていただきました。
新たに表示した部分に対してだけ、jqueryのセレクタを指定する方法あるのでしょうか。
適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。
--------------------------- 追記 ---------------------------
jsqrollにはコールバック関数があり、以下のようにcallback: function()の中に書くことで、新たに表示されたもののstatus_moreを閉じることはできました。
しかし、今の書き方ですと、一番下にスクロールするまでに表示したstatus_moreも閉じてしまいます。
今表示しているscroll positionより下のセレクタに適用する方法などはありますでしょうか。
ruby
1 2 # show.html.erb 3 4 <ul class="skill-list jscroll"> 5 <% @users.each do |user| %> 6 <ul class="content"> 7 <li class="content_right"> 8 <div class="status"> 9 <dl><dt>xxx</dt><dd><%= user.xxxx %></dd></dl> 10 <dl><dt>yyy</dt><dd><%= user.yyy %></dd></dl> 11 <dl><dt>zzz</dt><dd><%= user.zzz %></dd></dl> 12 <div class="status_more"> 13 <dl><dt>aaa</dt><dd><%= user.aaa %></dd></dl> 14 <dl><dt>bbb</dt><dd><%= user.bbb %></dd></dl> 15 <dl><dt>ccc</dt><dd><%= user.ccc %></dd></dl> 16 <dl><dt>ddd</dt><dd><%= user.ddd %></dd></dl> 17 <dl><dt>eee</dt><dd><%= user.eee %></dd></dl> 18 </div> 19 <a href="/" class="bt_more"><span>表示する</span></a> 20 </div> 21 </li> 22 </ul><!-- /.content --> 23 <% end %> 24 <%= paginate @users %> 25 </ul><!-- /.skill-list .jscroll --> 26
javascript
1 2// 下までスクロールされたら次のページを読み込む 3$(window).on('scroll', function() { 4 scrollHeight = $(document).height(); 5 scrollPosition = $(window).height() + $(window).scrollTop(); 6 if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { 7 $('.jscroll').jscroll({ 8 autoTrigger: true, 9 padding: 20, 10 contentSelector: '.skill-list', 11 nextSelector: 'span.next:last a', 12 callback: function() { 13 // このように書いて解決できた 14 $(this).find(".bt_more").prevAll('.status_more').hide(); 15 }); 16 } 17 18 }); 19 20 // 表示・非表示切り替え 21 $(function () { 22 $('.bt_more').prevAll('.status_more').hide(); 23 $(document).on('click',".bt_more", function() { 24 if ($(this).prevAll('.status_more').is(':hidden')) { 25 $(this).prevAll('.status_more').slideDown(); 26 $(this).children('span').text('非表示に戻す').addClass('close'); 27 } else { 28 $(this).prevAll('.status_more').slideUp(); 29 $(this).children('span').text('表示する').removeClass('close'); 30 } 31 return false; 32 }); 33 }); 34
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。