javascriptで絞り込み検索

javascriptで簡素な絞り込み検索を作りました。
jQueryなしで動きます。

See the Pen 190326_javascriptで絞り込み検索 by nekuta (@nekuta) on CodePen.

data属性で絞り込みをする

ラジオボタンのdata-sort-navの値がdata-sort-itemに含まれているものだけにクラスをつけます。data-sort-itemはコンマで区切ると複数値を入れられるようにしました。

タイトルの値も変える

const sortTtlNameArrey = []; // data-sort-navを入れる配列 
const sortList = document.getElementById('sort-list');

// ~~~~~中略~~~~~ 
// しぼりこみ表示 
clickSort = function (e) {
	const dataSortNav = e.currentTarget.getAttribute('data-sort-nav');
	// dataSortNavと同じ値を持っているものにclassをつける 
	for (var i = 0; i < sortListLi.length; i++) {
		(function (n) {
			const sortListLiDataSortItem = sortListLi[n].getAttribute('data-sort-item');
			const sortListLiDataSortItemArrey = sortListLiDataSortItem.split(',');//文字列配列に 
			// console.log(sortListLiDataSortItemArrey); 
			for (var a = 0; a < sortListLiDataSortItemArrey.length; a++) {
				if (sortListLiDataSortItemArrey[a] === dataSortNav) {//もし一致する値があったらクラスをつけてforを抜ける 
					sortListLi[i].classList.add('is-selected');
					break;
				} else {
					sortListLi[i].classList.remove('is-selected');
				}
			}
		}
		)(i);
	}
};
// ~~~~~中略~~~~~