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);
}
};
// ~~~~~中略~~~~~
