【JavaScript】クリックでカテゴリ別に表示を出し分け

2023年09月12日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は多くの場面で活用できるカテゴリ別に表示を出し分ける方法をご紹介します。

実装例

カテゴリー1
カテゴリー2
カテゴリー2
カテゴリー3
カテゴリー4
カテゴリー3
カテゴリー1
カテゴリー1
カテゴリー4
カテゴリー3
カテゴリー1
カテゴリー3
カテゴリー3
カテゴリー2
カテゴリー4
カテゴリー4
カテゴリー1
カテゴリー4
カテゴリー2

上部のボタンをクリックしてもらうとわかると思うのですが、
そのカテゴリ要素が入ったパネルだけ抽出されて表示されていると思います。

HTML例

<ul class="category-list">
    <li class="category-list-item">
        <button class="js-sort js-sort1" data-sort="js-cat1">カテゴリー1</button>
    </li>
    <li class="category-list-item">
        <button class="js-sort js-sort2" data-sort="js-cat2">カテゴリー2</button>
    </li>
    <li class="category-list-item">
        <button class="js-sort js-sort3" data-sort="js-cat3">カテゴリー3</button>
    </li>
    <li class="category-list-item">
        <button class="js-sort js-sort4" data-sort="js-cat4">カテゴリー4</button>
    </li>                
</ul>
<ul class="product-list">
    <li class="product-list-item">
        <span class="js-cat1">カテゴリー1</span>
        <span class="js-cat2">カテゴリー2</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat2">カテゴリー2</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat3">カテゴリー3</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat4">カテゴリー4</span>
        <span class="js-cat3">カテゴリー3</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat1">カテゴリー1</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat1">カテゴリー1</span>
        <span class="js-cat4">カテゴリー4</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat3">カテゴリー3</span>
        <span class="js-cat1">カテゴリー1</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat3">カテゴリー3</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat3">カテゴリー3</span>
        <span class="js-cat2">カテゴリー2</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat4">カテゴリー4</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat4">カテゴリー4</span>
        <span class="js-cat1">カテゴリー1</span>
    </li>
    <li class="product-list-item">
        <span class="js-cat4">カテゴリー4</span>
        <span class="js-cat2">カテゴリー2</span>
    </li>
</ul>

CSS例

ul{
    padding: 0;
    list-style: none;
}
.category-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.category-list-item{
    margin: 0 5px;
}
.js-sort{
    color: #fff;
    border:none;
    border-radius: 8px;
    padding: 5px 12px;
    display: block;
    background-color: rgb(54, 54, 54);
    transition: .4s;
    cursor: pointer;
}
.js-sort:hover{
    opacity: .7;
}
.js-cat1,
.js-sort1{
    background: #f04848;
}
.js-cat2,
.js-sort2{
    background: #4861f0;
}
.js-cat3,
.js-sort3{
    background: #2daf40;
}
.js-cat4,
.js-sort4{
    background: #d7d11d;
}
.product-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-list-item{
    width: calc(100% / 5);
    margin: 2px;
    border: 1px solid #aaa;
    padding: 10px;
}
.product-list-item span{
    font-size: 12px;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

JavaScript例

window.addEventListener('DOMContentLoaded',function(){
    let sortBtn = document.getElementsByClassName('js-sort');
    let productItem = document.getElementsByClassName('product-list-item');
    let cat1 = document.getElementsByClassName('js-cat1');
    let cat2 = document.getElementsByClassName('js-cat2');
    let cat3 = document.getElementsByClassName('js-cat3');
    let cat4 = document.getElementsByClassName('js-cat4');
    
    for(let i = 0; i < sortBtn.length; i++){
        sortBtn[i].addEventListener('click',function(){
        let catBox = this.getAttribute('data-sort');
            for(let i = 0; i < sortBtn.length; i++){
                for(let a = 0; a < productItem.length; a++){
                    for(let b = 0; b < cat1.length; b++){
                        for(let c = 0; c < cat2.length; c++){
                            for(let d = 0; d < cat3.length; d++){
                                for(let e = 0; e < cat4.length; e++){
                                    switch (catBox){
                                        case 'js-cat1':
                                        productItem[a].style.display = 'none';
                                        cat1[b].parentNode.style.display = 'block';
                                        break;

                                        case 'js-cat2':
                                        productItem[a].style.display = 'none';
                                        cat2[c].parentNode.style.display = 'block';
                                        break;

                                        case 'js-cat3':
                                        productItem[a].style.display = 'none';
                                        cat3[d].parentNode.style.display = 'block';
                                        break;

                                        case 'js-cat4':
                                        productItem[a].style.display = 'none';
                                        cat4[e].parentNode.style.display = 'block';
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },false);
    }
});

switch文で記述しましたが、なんかごちゃごちゃしてしまいましたね・・・
もっとスマートに書けないかなぁ