SNS型求人広告サイトを作っていて躓きました。
###前提・実現したいこと
多重<span>構造を取り除き、「もっと読む」機能を実装したい。
###発生している問題・エラーメッセージ
<span>が繰り返し、出力されます。
ブラウザ画面ではこのようになっています。
この多重<span>構造が「もっと読む」機能の実装を妨げているように思われます。
本当はこうなってほしい。。。
なぜ、<span>が繰り返されるのかがわからないのです。
ちなみにタイムライン上に呼び出される_micropost.html.erbは多重<span>構造のエラーが発生しますが、コメント一覧をみるときにmicropostが呼び出されるshow.html.erbでは正常に作用しています。(moreを押すと隠された文字が表示されます。)
###該当のソースコード
【_micropost.html.erb】
ruby
1<li id="micropost-<%= micropost.id %>"> 2 3 <!-- ユーザーアイコン --> 4 <% if micropost.shop.nil? %> 5 <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> 6 <% elsif micropost.user.nil? %> 7 <%= link_to gravatar_to(micropost.shop, size: 50), micropost.shop %> 8 <% end %> 9 10 <!-- ユーザー名 --> 11 <% if micropost.shop.nil? %> 12 <!-- User名 --> 13 <span class="user"><%= link_to micropost.user.username, micropost.user %></span> 14 <% elsif micropost.user.nil? %> 15 <!-- Shop名 --> 16 <span class="user"><%= link_to micropost.shop.shopname, micropost.shop %></span> 17 <% end %> 18 19 <!-- User/Shop 共通 --> 20 <span class="content"> 21 <!-- 投稿文 --> 22 <div class="more"> 23 <%= micropost.content %>←ここが問題箇所 24 </div> 25 <!-- 投稿写真 --> 26 <%= image_tag micropost.picture.url if micropost.picture? %> 27 </span> 28 <!-- 投稿時間 --> 29 <span class="timestamp"> 30 Posted <%= time_ago_in_words(micropost.created_at) %> ago. 31 </span> 32 33 34 <% if user_signed_in? %> 35 <!-- 削除リンク User ver--> 36 <% if current_user?(micropost.user) %> 37 <%= link_to "delete", micropost, method: :delete, data: { confirm: "You sure?" } %> 38 <% end %> 39 40 <!-- お気に入り登録リンク user-to-micropost.user--> 41 <% if micropost.shop.nil? %> 42 <% if !current_user?(micropost.user) %> 43 <%= render 'evaluates/evaluate_links', micropost: micropost %> 44 <% end %> 45 46 <% elsif micropost.user.nil? %> 47 <!-- いいね!リンク user-to-micropost.shop --> 48 <% if !current_user?(micropost.user) %> 49 <%= render 'praises/praise_links', micropost: micropost %> 50 <% end %> 51 <% end %> 52 53 54 55 <% elsif shop_signed_in? %> 56 <!-- 削除リンク Shop ver--> 57 <% if current_shop?(micropost.shop) %> 58 <%= link_to "delete", micropost, method: :delete, data: { confirm: "You sure?" } %> 59 <% end %> 60 61 <% if micropost.shop.nil? %> 62 <!-- お気に入り登録リンク shop-to-micropost.user--> 63 <% if !current_shop?(micropost.shop) %> 64 <%= render 'sympathizes/sympathize_links', micropost: micropost %> 65 <% end %> 66 67 <% elsif micropost.user.nil? %> 68 <!-- いいね!リンク shop-to-micropost.shop --> 69 <% if !current_shop?(micropost.shop) %> 70 <%= render 'likes/like_links', micropost: micropost %> 71 <% end %> 72 <% end %> 73 74 75 <% end %> 76 77 <%= link_to 'コメントを見る', micropost_path(micropost.id) %> 78 79</li> 80<script> 81$(document).ready(function() { 82 var showChar = 25; 83 var ellipsestext = "..."; 84 var moretext = "more"; 85 var lesstext = "less"; 86 $('.more').each(function() { 87 var content = $.trim($(this).html()); 88 89 if(content.length > showChar) { 90 91 var c = content.substr(0, showChar); 92 var h = content.substr(showChar, content.length - showChar); 93 94 var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>'; 95 96 $(this).html(html); 97 } 98 99 }); 100 101 $(".morelink").click(function(){ 102 if($(this).hasClass("less")) { 103 $(this).removeClass("less"); 104 $(this).html(moretext); 105 } else { 106 $(this).addClass("less"); 107 $(this).html(lesstext); 108 } 109 $(this).parent().prev().toggle(); 110 $(this).prev().toggle(); 111 return false; 112 }); 113}); 114</script>
【_feed.html.erb】ここのパーシャルはエラーになる
ruby
1<% if @feed_items.any? %> 2 <ol class="microposts"> 3 <%= render @feed_items %> ←ここで_micropost.html.erbを呼び出します。 4 </ol> 5 <%= will_paginate @feed_items %> 6<% end %>
【show.html.erb】→「more」を押すと、隠された文字が表示されます。
ruby
1 <div class="row"> 2 <aside class="col-md-4"> 3 <!-- 投稿 --> 4 <div class="col-md-8"> 5 <%= render @micropost, micropost: @micropost %> ←ここで_micropost.html.erbを呼び出している。 6 </div> 7 8 9 10 11 <!-- コメント --> 12 <div class="col-md-8"> 13 14 <!-- user-to-micropost.user --> 15 16 <% @comments. each do |comment| %> 17 <div> 18 <strong><%= comment.user.username %></strong> 19 </br> 20 <p><%= comment.body %></p> 21 <% if user_signed_in? && comment.user == current_user %> 22 <p><%= link_to 'Delete', comment_path(comment), method: :delete %></p> 23 <% end %> 24 </div> 25 <% end %> 26 27 <!-- user-to-micropost.shop --> 28 29 <% @calls. each do |call| %> 30 <div> 31 <strong><%= call.user.username %></strong> 32 </br> 33 <p><%= call.body %></p> 34 <% if user_signed_in? && call.user == current_user %> 35 <p><%= link_to 'Delete', call_path(call), method: :delete %></p> 36 <% end %> 37 </div> 38 <% end %> 39 <% if user_signed_in? %> 40 <%= render 'calls/form' %> 41 <% end %> 42 <!-- shop-to-micropost.shop --> 43 <% @says. each do |say| %> 44 <div> 45 <strong><%= say.shop.shopname %></strong> 46 </br> 47 <p><%= say.body %></p> 48 <% if shop_signed_in? && say.shop == current_shop %> 49 <p><%= link_to 'Delete', say_path(say), method: :delete %></p> 50 <% end %> 51 </div> 52 <% end %> 53 <% if shop_signed_in? %> 54 <%= render 'says/form' %> 55 <% end %> 56 57 <!-- shop-to-micropost.shop --> 58 59 <% @insists. each do |insist| %> 60 <div> 61 <strong><%= insist.shop.shopname %></strong> 62 </br> 63 <p><%= insist.body %></p> 64 <% if shop_signed_in? && insist.shop == current_shop %> 65 <p><%= link_to 'Delete', insist_path(insist), method: :delete %></p> 66 <% end %> 67 </div> 68 <% end %> 69 <% if shop_signed_in? %> 70 <%= render 'insists/form' %> 71 <% end %> 72 </div> 73 </aside> 74 </div>
###試したこと
・html5.validator → 500 Internal Server Error
・css内で.moreが重複されていないか確認済み
・show,_feed,_micropost.html.erb内のdivを一つ削除しながらmoreが動くか確認済み
###補足情報(言語/FW/ツール等のバージョンなど)
下記URL内の質問が発端です。
より詳細な情報が載っております。
開閉設定の参考コード
[もっとみる...] / [See more...] をjQueryで実装する(開閉できるタイプ)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/01 02:11
退会済みユーザー
2016/11/01 07:35 編集