파이어베이스관련 질문입니다.

[박지헌]

   db에서 이미지들을 가져와서 탭에 맞게 분류하려고 하는데요.

data-name으로 분류명 넣고

filterImgName이라는 변수에 가져온 이미지들의 data-name를 넣는데까지는 성공했습니다.

근데 4장의 사진을 가져오는데

항상

가장 마지막 사진의 data-name이 filterImgName의 변수로 지정되어서

 

각각의 이미지들의 data-name은 탭에 맞게 나뉘어지지 않고 전체가 한 뭉텅이로

가장 마지막사진의 data-name으로 합쳐져서 한 탭으로만 들어가게 되어요...ㅠㅠㅠ

 

아래는 코드입니다. 

 

각 이미지들의 data-name에 맞게 분류하고 싶어요...

 

<script>
        const db = firebase.firestore();
       
        var filterImgName = '';

        db.collection('square').get().then((결과)=>{
            결과.forEach((doc)=>{
                var 템플릿 = `
                <div class="image" data-name="${doc.data().챕터}">
                    <span>
                        <img src="${doc.data().이미지}.jpg" alt="">
                    </span>
                </div>`;
               
           
                $('.gallery').append(템플릿)
                var filterImgName = doc.data().챕터
                const filterItem = document.querySelector(".items");
                const filterImg = document.querySelectorAll(".image");
                console.log(filterImgName)

                filterItem.onclick = (selectedItem) => {
                if(selectedItem.target.classList.contains("item")){ //분류 중 하나를 클릭할 때 그 밑의 이미지들이 있다면
                    filterItem.querySelector(".active").classList.remove("active");
                    //items의 class에 active가 있다면 그것을 제거한다.
                    selectedItem.target.classList.add("active");
                    //선택된 items에 active라는 클래스명을 추가한다.
                    let filterName = selectedItem.target.getAttribute("data-name");
                    console.log(filterName);
                    //선택된 분류의 data-name를 filterName으로 설정
                    filterImg.forEach((image) => { //filterImg의 각 이미지들에게 실행하는 반복문
                        //image의 data-name가져오기
                        if((filterImgName == filterName) || filterName == "all"){
                            //filterImages의 dataname이 filterName의 dataname하고 같거나
                            //fiterName이 all이라면
                            image.classList.add("show");
                            console.log(filterImgName)
                            //image에 show라는 클래스명을 넣고
                        }else{
                            image.classList.add("hide");
                            //image라는 hide라는 클래스명을 넣고
                            image.classList.remove("show");
                            //show라는 클래스명을 지운다.
                        }
                    })
                }
            }
            for ( let index = 0; index < filterImg.length; index++){
            filterImg[index].setAttribute("onclick", "preview(this)");
        }
            })
        })

[codingapple]

document.querySelector(".items") 이렇게 찾으면 .items중에 맨 위의 것만 찾아줍니다 

2번째 3번째도 찾고 싶으면 querySelectorAll을 쓰거나 해봅시다 

[글쓴이]

글