やりたいこと
長い文章が書かれているときに、ある一定以上の文字数を基準に「続きを見る」と表示して、以降の文字列を非表示にする。
長い文章が書かれている場所
<div class="text_wrap">
<p>ここに長いテキストが入ります。全角で10字を超える場合に「続きを見る」リンクが表示されるようにします。</p>
</div>
<style>
.read-more-state {
display: none;
}
.read-more-target {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>「続きを見る」と「閉じる」を実装
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// ページの全ての要素が読み込まれた後に、指定した関数を実行します。
$(document).ready(function() {
// '.text_wrap p' セレクタにマッチする全ての<p>要素に対して、関数を実行します。
$('.text_wrap p').each(function() {
var maxLen = 10; // 表示する最大文字数を設定します。
// 現在の<p>要素のテキストから空白、改行を除去した後の文字数を計算します。
var strLen = $(this).text().replace(/[\n\r\s]+/g, '').length;
// 文字数が設定した最大文字数を超えている場合に処理を行います。
if (strLen > maxLen) {
// 現在の<p>要素のテキストから最初の10文字を取得します。
var strBegin = $(this).text().substr(0, maxLen);
// 残りのテキストを取得します。
var strRemain = $(this).text().substr(maxLen);
// 現在の<p>要素のHTMLを再構築します。省略記号、続きを読むリンク、続きの内容を含むHTMLを追加します。
$(this).html(strBegin + '<span class="read-more-ellipsis">…</span><a href="#" class="read-more-link">続きを見る</a><span class="read-more-content"><span>' + strRemain + '</span><a href="#" class="read-less-link">閉じる</a></span>');
// 続きの内容を最初は非表示にします。
$('.read-more-content').hide();
// 「続きを見る」リンクがクリックされた時の動作を定義します。
$(this).find('.read-more-link').click(function(e) {
e.preventDefault(); // リンクのデフォルト動作（ページ遷移など）を防止します。
$(this).hide(); // 「続きを見る」リンクを隠します。
$(this).siblings('.read-more-ellipsis').hide(); // 省略記号を隠します。
$(this).next('.read-more-content').show(); // 続きの内容を表示します。
});
// 「閉じる」リンクがクリックされた時の動作を定義します。
$(this).find('.read-less-link').click(function(e) {
e.preventDefault(); // リンクのデフォルト動作を防止します。
$(this).parent('.read-more-content').hide(); // 続きの内容を隠します。
$(this).parent().siblings('.read-more-link').show(); // 「続きを見る」リンクを再表示します。
$(this).parent().siblings('.read-more-ellipsis').show(); // 省略記号を再表示します。
});
}
});
});
</script>その結果・・・
使用されている関数
$(document).ready()
この関数は、ページの全てのDOM要素が読み込まれて初めて実行される関数を定義します。これにより、スクリプトがHTML要素にアクセスしようとした際に、その要素が既にページに存在していることを保証します。
.each()
jQueryの.each()関数は、特定のセレクタにマッチする全ての要素に対して、指定した関数を実行します。このスクリプトでは、.text_wrap pセレクタにマッチする全ての<p>要素に対して、テキストを省略する処理を行います。
.text()
.text()関数は、jQueryオブジェクトのテキスト内容を取得または設定します。この場合、$(this).text()は現在処理中の<p>要素のテキスト内容を取得しています。
.replace()
JavaScriptの.replace()メソッドは、文字列内のパターンにマッチする部分を別の文字列に置換します。ここでは、改行、空白などを除去して純粋なテキストの文字数を計算するために使用されています。
.substr()
.substr()メソッドは、文字列から指定された位置から始まる特定の数の文字を抽出します。ここでは、テキストの最初のmaxLen文字と、それ以降の文字列を抽出するのに使用されています。
.html()
.html()関数は、要素のHTML内容を取得または設定します。このスクリプトでは、省略されたテキスト、省略記号、続きを見るリンク、そして隠された全テキストの新しいHTML構造を<p>要素に設定しています。
.hide() / .show()
これらの関数は、要素の表示状態を切り替えます。.hide()は要素を非表示にし、.show()は要素を表示します。このスクリプトでは、初めに「続きの内容」を非表示にし、リンクがクリックされた時に表示を切り替えています。
.click()
.click()関数は、要素がクリックされた時に実行されるイベントハンドラーを設定します。このコードでは、「続きを見る」リンクと「閉じる」リンクのクリックイベントに応答して、テキストの表示を切り替える処理を定義しています。
e.preventDefault()
このメソッドは、イベントのデフォルトの動作をキャンセルします。リンクがクリックされた際にページが別のURLに移動するのを防ぐために使用されています。このスクリプトでは、リンククリック時のページ遷移を防ぎ、代わりに定義された関数を実行します。
中央にポップアップを表示して、その中に実装してみることも可能
元々以下のようになっていた部分を
<div class="text_wrap">
<p>ここに長いテキストが入ります。全角で10字を超える場合に「続きを見る」リンクが表示されるようにします。</p>
</div>
<style>
.read-more-state {
display: none;
}
.read-more-target {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>こうする（CSSを加えただけ）
<div class="text_wrap">
<p>ここに長いテキストが入ります。全角で10字を超える場合に「続きを見る」リンクが表示されるようにします。</p>
</div>
<style>
.read-more-state {
display: none;
}
.read-more-target {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.text_wrap p{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background-color: white;
border: 1px solid black;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
</style>すると以下のようになる
ポップアップの詳細は以下のnoteを参考
コメントを残す