BLOG

filterGallery

こんばんは。

最近コーディングはもちろん、デザイン力、文章力も上げていきたいなと欲張り野郎になりつつありますどうもハヤトワンです。

ていうかこれがないとやってけねえ。

でも学ぶのは楽しいから攻めてみようと思います。

ということで、今日のコーディング。

画像の絞り込みができるやつを作りました。

    <script type="text/javascript">
        let sortBtn = document.querySelector('.filter-menu').children;
        let sortItem = document.querySelector('.filter-item').children;
        for(let i = 0; i < sortBtn.length; i++) {
            sortBtn[i].addEventListener('click', function() {
                for(let j = 0; j < sortBtn.length; j++){
                    sortBtn[j].classList.remove('current');
                }
                this.classList.add('current');

                let targetData = this.getAttribute('data-target');

                for(let k = 0; k < sortItem.length; k++) {
                    sortItem[k].classList.remove('active');
                    sortItem[k].classList.add('delete');

                    if(sortItem[k].getAttribute('data-item') === targetData || targetData === "all"){
                        sortItem[k].classList.remove('delete');
                        sortItem[k].classList.add('active');
                    }
                }
            })
        }
    </script>

カテゴリーボタンを押すと、押したボタンに色がつくようにfor文でcurrentクラスをつけ外し、

dataTargetにgetAttributeでそれぞれの画像に割り振った属性名がはいるようにして、それをfor文でactiveを外しdeleteの付与、かつif文でそれぞれのカテゴリー名もしくはallだったらdeleteを消してactiveを付与するようにすれば、各カテゴリーとallのときにそれぞれの画像が表示されるようになる。

楽しい。

ということで今日はここまで。

それでは良いサタデーナイトを。