今ある求人広告サイトに紹介されているバイト内容があまりにもブラックボックスで想像ができないため、自分でSNS型求人広告サイトを作ろうとしています。
###前提・実現したいこと
コメントの開閉後に表示されるはずの文が表示されません。
各投稿文末にもっと読む(ここではmore)のように投稿文の開閉機能をjqueryで実装したいです。
(例)========================
【投稿文が閉じている場合】
test1test1test1test1...もっと読む
【投稿文が開いている場合】
test1test1test1test1test1test1test1test1 閉じる
==========================
###発生している問題・エラーメッセージ
上の例が理想状態なのですが、エラーが2つ発生しています。
①投稿文が閉じている状態で、表示される文字が<script>内で指定している文字数と一致しない。
【<script>内では25文字以降を表示しないように設定している。】
→実際表示されるのは14文字…(testtesttestの部分)
②moreを押して、投稿文を開いても隠されている文字が表示されない。
後、数文字表示される予定なのですが…
ご教示ください。お願いします。
###<情報追加>
==================================
==================================
【エラー当初の出力内容】----------------------------------------------------
【123456789abcdefghijklmnopqrstuvwxyzと投稿した場合】
###追加の追加
_micropost.html.erbでは開閉は機能しませんでしたが、
show.html.erbでは機能しました。
_micropost.html.erbはshow.html.erbのパーシャルですので、
コード内容には差がないのですが…
###ソースコード
kei344さんへ
【index.html.erb】
<div class="col-md-8"> <h3>Micropost Feed</h3> <%= render 'shared/feed' %> </div>
↓
【_feed.html.erb】
<% if @feed_items.any? %> <ol class="microposts"> <%= render @feed_items %> </ol> <%= will_paginate @feed_items %> <% end %>
↓
【_micropost.html.erb】
////省略////
###解決できたコード
【_feed.html.erb】
<% if @feed_items.any? %> <ol class="microposts"> <%= render @feed_items %> </ol> <%= will_paginate @feed_items %> <% end %> <script> $(document).ready(function() { var showChar = 25; var ellipsestext = "..."; var moretext = "more"; var lesstext = "less"; $('.more').each(function() { var content = $.trim($(this).html()); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar, content.length - showChar); var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function(){ if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); </script>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/31 09:17
2016/10/31 09:28
2016/10/31 09:35
2016/10/31 09:51
2016/10/31 10:10
2016/10/31 10:27
2016/10/31 10:54
2016/10/31 11:17
2016/10/31 13:15
2016/10/31 18:40
2016/10/31 23:17
2016/10/31 23:23
2016/11/01 02:18
2016/11/01 02:19
2016/11/01 02:20
2016/11/01 02:41
2016/11/01 02:49 編集