이펙트 응용편 - 서치 오번째

검색 이펙트

이번 이펙트는 별점이 있으며 별점을 누르면 속성을 볼수있습니다.

JS코드

객체에 star 을 추가하고 switch문을 이용하여 별을 넣어줬습니다만,
별이들어있는 ul 태그안에 클래스 star 을 주어 li 순번과 data.star 이 일치하면 li안에있는 텍스트를 불러와서 넣어주기로 했습니다 그후 click 이벤트에서 star.innerText.slice(0, 1); 을 이용하여 n개 이상인것을 출력하게 했습니다.

코드 보기

{ star: 1, name: "visibility", desc: "태그의 가시성을 결정합니다." },   
const updateList = (list) => {
    listCSS = "";
    for (const data of list) {
        let starCount = searchStar[data.star].innerText;
        listCSS += `
${data.name} : ${data.desc} ${starCount}
`;
        count++;
        // switch (data.star) {
        //     case 0:
        //         listCSS += `
${data.name} : ${data.desc} ☆☆☆☆☆
`;
        //         count++;
        //         break;
        //     case 1:
        //         listCSS += `
${data.name} : ${data.desc} ★☆☆☆☆
`;
        //         count++;
        //         break;
        //     case 2:
        //         listCSS += `
${data.name} : ${data.desc} ★★☆☆☆
`;
        //         count++;
        //         break;
        //     case 3:
        //         listCSS += `
${data.name} : ${data.desc} ★★★☆☆
`;
        //         count++;
        //         break;
        //     case 4:
        //         listCSS += `
${data.name} : ${data.desc} ★★★★☆
`;
        //         count++;
        //         break;
        //     case 5:
        //         listCSS += `
${data.name} : ${data.desc} ★★★★★
`;
        //         count++;
        //         break;
        //     default:
        //         listCSS += `
${data.name} : ${data.desc} 중요도가 없습니다.
`;
        //         count++;
        //         break;
        // }
    }
    searchList.innerHTML = listCSS;
    searchNum.textContent = count;
    count = 0;
};

updateList(cssProperty);

//클릭하기
searchClick.forEach((star, inx) => {
    star.addEventListener("click", () => {
        const target = inx;
        const target2 = star.innerText.slice(0, 1);
        const filterlist = cssProperty.filter((data) => data.star == target || data.star >= target2);
        updateList(filterlist);
    });
});              

원본 사이트 보기 원본 소스 보기