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

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

ただいまの
回答率

90.23%

投稿文の開閉設定の変数がうまいこと作用しない。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 717

s.k

score 266

今ある求人広告サイトに紹介されているバイト内容があまりにもブラックボックスで想像ができないため、自分でSNS型求人広告サイトを作ろうとしています。

前提・実現したいこと

コメントの開閉後に表示されるはずの文が表示されません。

各投稿文末にもっと読む(ここではmore)のように投稿文の開閉機能をjqueryで実装したいです。

(例)========================

【投稿文が閉じている場合】
test1test1test1test1...もっと読む

【投稿文が開いている場合】
test1test1test1test1test1test1test1test1 閉じる

==========================

発生している問題・エラーメッセージ

上の例が理想状態なのですが、エラーが2つ発生しています。

①投稿文が閉じている状態で、表示される文字が<script>内で指定している文字数と一致しない。

【<script>内では25文字以降を表示しないように設定している。】

イメージ説明

→実際表示されるのは14文字…(testtesttestの部分)

②moreを押して、投稿文を開いても隠されている文字が表示されない。

イメージ説明

後、数文字表示される予定なのですが…

ご教示ください。お願いします。

<情報追加>

==================================

・通常の投稿の文字数
イメージ説明

・script記述後
イメージ説明

==================================

【エラー当初の出力内容】----------------------------------------------------

イメージ説明


投稿内容にたどり着きました

イメージ説明

【123456789abcdefghijklmnopqrstuvwxyzと投稿した場合】
イメージ説明

イメージ説明

投稿文までたどり着きました。

イメージ説明


追加の追加

_micropost.html.erbでは開閉は機能しませんでしたが、
show.html.erbでは機能しました。

_micropost.html.erbはshow.html.erbのパーシャルですので、
コード内容には差がないのですが…

【moreを押す前】
イメージ説明

【moreを押した後】
イメージ説明

ソースコード

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+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

手元で適当なテキストを書いて試してみたところでは特に問題無いように見えますが、

<div class="more">
   <%= micropost.content %>
</div>

ここは最終的に、どのようなHTMLが出力されるのでしょうか?むしろそちらのほうが重要です。Rubyは門外漢なので的外れかもしれませんが、

var content = $(this).html();

ここでテキストではなくHTMLで取得しているのが気になっています。

もし展開される文字列にタグや実体参照など、単体の文字ではない形で解釈されるべきモノが含まれていると、その途中で切り離されて、テキストとして露出する可能性があります。

<div class="more">
<a href="http://www.google.co.jp/">Google</a>
</div>

超適当ですが例えばこんな展開だったとすると、25文字目はhref属性のURLの途中ですので、タグが途中で切り離されます。結果として、処理後のHTML構造も破綻しますので、意図しない文字列が現れるなどの不具合が出るでしょう。

<div class="more">
<a href="http://www.goog&lt;span class=" moreellipses"="">...&nbsp;<span class="morecontent"><span>le.co.jp/"&gt;Google</span></span></a>
&nbsp;&nbsp;<a href="" class="morelink">more</a></div>

言い表せないくらいひどいことになっていました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/01 11:20

    think49さん

    キャンセル

  • 2016/11/01 11:41

    コメントは編集することが出来ます。
    コメントの名前がある行にマウスカーソルを合わせると右上に [V] ボタンが出てくるのでそれをクリックし、[編集] を選択してください。
    以前は [編集] とか分かりやすいボタンが配置されていた気がするのですが、いつの間にかわかる人にしかわからないUIになってしまってますね…。

    キャンセル

  • 2016/11/01 11:46 編集

    think49さん

    そんな機能があったんですね!
    今、試したらできました!

    そうですね…
    ちょっと、その件、teratailさんに相談してみます!


    意見伝えて置きました。

    キャンセル

check解決した方法

0

自己解決欄で投稿していますが、kei344さんに解決していただきました。

<%= render @feed_items %>


このコードが_micropost.html.erbパーシャルを呼び出します。
そして、@micropostsがhtmlで出力されます。

この時、jsのコードを_micropost.html.erbパーシャル内に書いてしまうことで、
jsのコードも一緒に何度も呼び出されることが、<span>の多重構造を引き起こし、
「もっと読む」機能の妨げになっていました。

そこで、jsコードを

<%= render @feed_items %>


このコードが書かれているファイル内に記載します。
すると、解決できました。

kei344さん、そしてみなさんありがとうございます!

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/01 12:55

    できました!!!!!!!!!!!!!

    キャンセル

  • 2016/11/01 14:05

    よかったね。

    キャンセル

  • 2016/11/01 14:14

    ありがとうございます!

    キャンセル

0

.moreの幅や高さをCSSで指定していませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 19:12

    spanが多重になっていますね。出力方法にそもそも問題があるようです。

    ついでですが、spanの中にdivを入れる構造にされていますが、文法的には間違っています。

    キャンセル

  • 2016/10/31 19:14

    なるほど…

    spanの件、承知しました!( ゚Д゚)

    キャンセル

  • 2016/10/31 19:21

    123456789abcdefghijklmnopqrstuvwxyz

    ですが、

    123456789abcde

    までしか表示されませんでした。
    追記してあります。

    キャンセル

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

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる