続きを読むを文章量の違うものを想定して複数個実装するとき個別に高さを取得したいです

Question

ちょっとしたお知らせ一覧のページを作っています。
その中で本文が一定の行数を超えたら表示が切られ「続きを読む」が表示される機能を実装中つまずき質問させていただきました。
やりたいこととしては主に下記の3点です。

• 本文が3行以上の場合は「続きを読む」を表示
• 3行以下の場合は「続きを読む」を非表示
• 全文表示後に「閉じる」ボタンを表示

https://dezanari.com/jquery-trim-line-height/
こちらのページを参考に「続きを読む」「閉じる」が複数個ある場合も個別で動作するところまではできたのですが、個々のテキスト全体の高さを取得する部分がどうしてもうまくいきません。
ソースは現在、一番最初の高さを取得してしまうため、1つ目の項目が3行以上の場合は以降の項目が短くても「続きを読む」が表示されてしまい、逆に本文が短いと以降も動作しないもしくは2番目以降で1番目より長いものがあると閉じるボタンにかぶさるように表示されてしまいます。

ソースの「var textHeight = $text.height();」の部分を個々に所得して動作させるにはどうしたらいいでしょうか？

<script>
$(document).ready(function(){
    // 続きを読む
    var $text = $('.more_txt'); // 本文
    var $txt_open = $('.txt_open'); // 続きを読む
    var $txt_close = $('.txt_close');　// 閉じる
    var lineNum = 3;
    var textHeight = $text.height(); // テキスト全体の高さ取得
    var lineHeight = parseFloat($text.css('line-height')); // line-height取得
    var textNewHeight = lineHeight * lineNum; // 指定行数までの高さ取得

    if (textHeight > textNewHeight){ // 指定行数以上で作動
        $text.css({
            height: textNewHeight,
            overflow: 'hidden',
        });

        $txt_open.click(function(){ // 続きを読む
            $(this).next($txt_close).css('display', 'block'); // 閉じるを表示
            $(this).css('display', 'none');
            $(this).prev(".more_txt").css({
                'height': textHeight,
                'overflow': 'visible',
            });
        });

        $txt_close.click(function(){ // 閉じる
            $(this).prev($txt_open).css('display', 'block'); // 続きを読むを表示
            $(this).css('display', 'none');
            $(this).prev().prev(".more_txt").css({
                height: textNewHeight,
                overflow: 'hidden',
            });
        });
    } else {
        $txt_open.hide(); // 3行以下は非表示
    }
});
</script>

<div>
    <div class="box">
        <div class="more_txt">
            本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。
        </div>
        <a href="javascript:void(0)" class="txt_btn txt_open">続きを読む<ion-icon name="chevron-down-outline"></ion-icon></a>
        <a href="javascript:void(0)" class="txt_btn txt_close">閉じる<ion-icon name="chevron-up-outline"></ion-icon></a>                        
    </div>
</div>

<div>
    <div class="box">
        <div class="more_txt">
            本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>
            本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。<br>本文が入ります。
        </div>
        <a href="javascript:void(0)" class="txt_btn txt_open">続きを読む<ion-icon name="chevron-down-outline"></ion-icon></a>
        <a href="javascript:void(0)" class="txt_btn txt_close d_none">閉じる<ion-icon name="chevron-up-outline"></ion-icon></a>
    </div>
</div>

<div>
    <div class="box">
        <div class="more_txt">
            本文が入ります。<br>本文が入ります。
        </div>
        <a href="javascript:void(0)" class="txt_btn txt_open">続きを読む<ion-icon name="chevron-down-outline"></ion-icon></a>
        <a href="javascript:void(0)" class="txt_btn txt_close d_none">閉じる<ion-icon name="chevron-up-outline"></ion-icon></a>
    </div>
</div>

Comments

[gpsoft]

JSの$(close)と$(open)のところでエラーが出ますが、
$txt_closeと$txt_openの間違いですかね?

[hass-o]

すみません、そちら質問時に書き起こした際に間違えていたみたいです。
ご指摘ありがとうございます、ただいま修正しました。

Answer 1

CSSとして

.d_none {
  display: none;
}

を補いました。

また、最初の「閉じる」アンカーにd_noneクラスが足りなかったので、追加しました。

<a href="javascript:void(0)" class="txt_btn txt_close d_none">閉じる<ion-icon name="chevron-up-outline"></ion-icon></a>                        

で、本題ですが、

ソースの「var textHeight = $text.height();」の部分を個々に所得して動作させるにはどうしたらいいでしょうか？

ここですよね。

var $text = $('.more_txt'); // 本文

↑ここで、$textには、3つの.more_txtがセレクトされてるので、そのそれぞれに対して、「後続の処理(高さを取得したり、クリックイベントのハンドラを仕込んだり)」を繰り返せば良いです。

それには、each()を使います。

$text.each(function(){

  // ※1

});

3つの.more_txtの1つ1つに対して、「※1」が繰り返し実行されます。

よって、「※1」の部分に、「後続の処理」を書きます。今のコードの、var $txt_open = $('.txt_open');以降が、ほぼそのまま使えますよ。ただし、以下の点は手直しが必要です。

(1)$textの代わりに、$(this)を使う。

var textHeight = $(this).height(); // テキスト全体の高さ取得

↑こんな感じです。each()の内部では、$(this)が、「3つの.more_txtのうちの、いま着目してる1つ」を指します。

(2)$txt_openは、$(this)を起点にして探す。

var $txt_open = $(this).nextAll('.txt_open'); // 続きを読む

↑ここでもし、$txt_open = $('.txt_open')としてしまうと、3つの「続きを読む」がセレクトされてしまうので困ります。

(3)$txt_closeも、$(this)を起点にして探す。

var $txt_close = $(this).nextAll('.txt_close');　// 閉じる

以上で、一応、動くと思いますので、
あとは、お好みでリファクタリングしてみて下さい。

Comments

[hass-o]

それぞれ個別で動くようになりました、ありがとうございます！
cssの部分は実際使うソースにはあったのですが質問時に省いてしまい配慮が足りずすみません、こちらについても丁寧な解説ありがとうございました。