【jQuery+CSS】ファイルの種類に合わせてアイコンを表示する

2016/05/25

ファイルのダウンロードリンクを設置する際に、ファイルの種類にあわせてアイコンを表示させます。

こちらの記事で紹介した制作事例のサンプルです。

サンプルコード

jQueryで拡張子を取得してクラスを追加します。

HTML

<a href="ファイルのパス" class="hoge">これは何らかのファイルです</a>

jQuery

$(function(){
	$('.hoge').each(function(){
		var file = $(this).attr('href');
		var extention = file.split(".").pop(); // 拡張子を取得
		$(this).addClass(extention); // 拡張子をそのままクラスとして追加
	});
});

CSS

.hoge{
display: inline-block;
padding-left: 2em;
background-position: left center;
background-repeat: no-repeat;
}

.pdf{
background-image: url('img/pdf.png');
}

.doc,
.docx{
background-image: url('img/word.png');
}

例えば「拡張子が.docまたは.docxの場合は”.word”というクラスを追加」みたいな条件分岐にしてもいいんですが、CSS側でまとめて指定する方がシンプルで良いかなと思ってこうしました。