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

HTML JS
 2018.08.21
 2019.11.22
browser:  65 11 20 10 
ニャン易度 

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

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