質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2226閲覧

kaminari + jscrollで無限スクロールを実装中に、次に表示されたものにjqueryのセレクタ適用させる

lyzmfeqpxs54

総合スコア237

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/04/05 07:48

編集2020/04/10 05:43

いつもお世話になっております。
現在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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

表示後のコールバック関数の中で「this」を打つと、その新たに表示されるものを取得できること分かりましたので、下記のように書くことで解決できました。

callback: function() {
$(this).find(".bt_more").prevAll('.status_more').hide();
});

投稿2020/04/10 05:44

lyzmfeqpxs54

総合スコア237

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問