コピペでできる!簡単なJavaScriptで作る記事の読み込み

HTML JS
 2019.11.22

ページ送りをつけるのもいいですが、最近では、記事を隠しておいてボタンを押したら記事を表示する方法もあります。
続きを読むの開閉ボタン」のようにcssだけでやろうとすると、件数での制御が難しいですね。
なので、簡単なJavaScriptでできる記事(件数)の読み込みをご紹介します。

browser:  65 11 20 10 

簡単なJavaScriptで作る記事の読み込み

クラス名「.post」をカウントして初期表示5件。「もっと見るボタン」をクリックしたら5件づつ追加する。非表示の記事がなくなったらボタンを消す。というものになります。
ニャン易度

post01

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

post02

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

→続きはこちら

post03

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

post04

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

→続きはこちら

post05

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

post06

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

→続きはこちら

post07

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

post08

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

→続きはこちら

post09

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

post10

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

→続きはこちら

post11

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

→続きはこちら

<div class="post">post01</div>
<div class="post">post02</div>
<div class="post">post03</div>
<div class="post">post04</div>
<div class="post">post05</div>
<div class="post">post06</div>
<div class="post">post07</div>
<div class="post">post08</div>
<div class="post">post09</div>
<div class="post">post10</div>
<button id="btnClick">もっと見る</button>
$(document).ready(function(){
//5件ずつ読み込む----------------------------------------------------------//
	//postの総数をカウントする
	var n = $(".post").length;
	//初期表示5件以上は非表示にする
	$(".post:gt(4)").hide();
	//初期表示5件
	var Num = 5;
	//もっと見るボタンをクリックした時
	$("#btnClick").click(function(){
		Num += 5;//5件づつ追加する
		$(".post:lt("+Num+")").fadeIn(1000);//Num+5つ目以前を表示
		//残りのpostの個数が表示件数(Num)より少なくなったら
		if(n <= Num){
			$("#btnClick").hide();//もっと見るボタンを非表示にする
		}
	});
//5件ずつ読み込む----------------------------------------------------------//
});

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?