티스토리 뷰
{
//css 목록 보여주기
function updataList(list) { //함수로 묶어줌
listHTML = ""; //+눌렀을때 리스트추가 안되게 작업
for(const data of list){ //cssProperty를 for문을 이용해 계속 반복
listHTML += `<li>${data.name} : ${data.desc} <span>${data.view}</span>`; //listHtml로 화면에 cssProperty를 보이게 함
}
cssList.innerHTML = listHTML;
}
updataList(cssProperty) //함수 호출
//버튼 클릭하기
searchBox.forEach(span => { //searchBox 버튼을 클릭했을때
span.addEventListener("click", ()=>{
const target = span.dataset.view; //dataet의 view값을 가져온걸 target(타겟)에 저장
const filterList = cssProperty.filter(data => data.view >=target ) //filterList에 cssProperty에있는 taret보다 큰 view를 저장
updataList(filterList);
})
})
}
'Script Sample > Search Effect' 카테고리의 다른 글
searchEffect06 - sort() (0) | 2022.02.15 |
---|---|
searchEffect04 - find() (0) | 2022.02.08 |
searchEffect03 - charAt() (0) | 2022.02.08 |
searchEffect02- includes( ) (0) | 2022.02.07 |
searchEffect01- indexOf( ) (0) | 2022.02.07 |
댓글
© 2018 webstoryboy