2024. 10. 10. 01:18ㆍJavaScript
오늘은 자바스크립트의 클릭이벤트를 활용하는 방법을 알아볼거다.
하나의 버튼을 이용하여, 오름차순 정렬과 내림차순 정렬 모두 수행할 수 있도록 한다.
즉, 홀수번째로 눌렀을때는 오름차순 정렬
짝수번째로 눌렀을때는 내림차순 정렬로 바뀌도록 할 것이다
script 를 해당 폴더에 넣어두고, 선언해서 사용한다
-> <script src="parking.js"></script>
arrow 라는 클래스를 만들어서 여기에 🔺또는 🔻가 나오도록 할것이다.
🔺: 오름차순을 의미
🔻 : 내림차순을 의미
order 값이 1이라면, 버튼을 한번 더 눌렀을때에는 값이 -1로 바뀐다.
-> const order = +target.getAttribute('order')
target.setAttribute('order', -order)
문자열이 아닌, 정수형태로 비교하기 위해서 + 부호를 붙인다.
arr3.sort((e1, e2)=> {
const v1 = +e1.children[idx].innerText
const v2 = +e2.children[idx].innerText
기본적으로는 오름차순으로 정렬해둔다.
return (v1 <= v2 ? 1 : -1) * order
핵심
: 클릭이벤트는 3번째 컬럼부터 적용시키기
-> columns.slice(3, 7).forEach(e => e.onclick = sortHandler)
<style>
.item {
display: flex;
max-width: 1200px;
margin: auto;
}
.item > div {
flex: 2;
border: 1px solid grey;
padding: 5px 10px;
}
.item > div:nth-child(1) { flex: 5; }
.item > div:nth-child(2) { flex: 4; }
.columns {
background-color: #eee;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<h1>부산광역시 주차장 요금 현황</h1>
<hr>
<div id="root">
<div class="columns item">
<div order="1" class="pkNam"><span class="text">주차장이름</span><span class="arrow"></span></div>
<div order="1" class="guNm"><span class="text">지역</span><span class="arrow"></span></div>
<div order="1" class="pkFm"><span class="text">형식</span><span class="arrow"></span></div>
<div order="1" class="tenMin"<span class="text">10분주차요금</span><span class="arrow"></span></div>
<div order="1" class="ftDay"><span class="text">일주차요금</span><span class="arrow"></span></div>
<div order="1" class="ftMon"><span class="text">월주차요금</span><span class="arrow"></span></div>
<div order="1" class="pkCnt"><span class="text">전체주차대수</span><span class="arrow"></span></div>
</div>
<div class="main"></div> <!-- 내용이 나와야할 곳-->
</div>
<script src="parking.js"></script>
<script>
// JSON 데이터 출력하기
const arr2 = arr.slice(0, 300)
console.log(arr2)
const main = document.querySelector('.main')
arr2.forEach(e => {
let tag = ''
tag += `<div class="item">`
tag += ` <div class="pkNam">${e.pkNam }</div>`
tag += ` <div class="guNm">${e.guNm }</div>`
tag += ` <div class="pkFm">${e.pkFm }</div>`
tag += ` <div class="tenMin">${e.tenMin == '-' ? 0 : e.tenMin}</div>`
tag += ` <div class="ftDay">${e.ftDay == '-' ? 0 : e.ftDay }</div>`
tag += ` <div class="ftMon">${e.ftMon == '-' ? 0 : e.ftMon }</div>`
tag += ` <div class="pkCnt">${e.pkCnt }</div>`
tag += `</div>`
main.innerHTML += tag
})
// 클릭이벤트 설정
const columns = Array.from(document.querySelectorAll('div.columns > div')) // 배열로 만들기
// 클릭이벤트
function sortHandler(event) {
// 내가 클릭한 대상은 columns에서 몇번째 인덱스를 가지는가?
let target = event.target
while(target.tagName != 'DIV') {
target = target.parentNode
}
const idx = columns.indexOf(target)
console.log(idx) // idx가 -1 이라면 대상을 찾지 못했다는 뜻.
const order = +target.getAttribute('order') // order가 1이라면
target.setAttribute('order', -order) // 그 다음은 -1 이 나올것임(이것을 반환할때 곱해주면 함수실행할때마다 값이 바뀜)
document.querySelectorAll('span.arrow').forEach(e => e.innerText = '')
target.querySelector('span.arrow').innerText = order > 0 ? '🔺' : '🔻'
const arr3 = Array.from(document.querySelectorAll('div.main > div.item'))
arr3.sort((e1, e2)=> {
// 문자열이 아닌, 정수형태로 비교
const v1 = +e1.children[idx].innerText // 각 컬럼을 [0] [1] ... == [idx]
const v2 = +e2.children[idx].innerText
return (v1 <= v2 ? 1 : -1) * order
// children : HTMLCollection 형태, index 는 존재함
// 저번에 +a.querySelector('td:nth-child(2)').innerText 처럼
// 원하는 컬럼의 데이터만 뽑아올 수 있도록 한다
})
arr3.forEach(e => main.appendChild(e))
}
columns.slice(3, 7).forEach(e => e.onclick = sortHandler)
</script>
</body>
</html>
오늘도 코드를 작성하면서 삼항연산자를 사용하여 코드의 길이를 더 줄어든 일이 있었다.
매번 작성하는 코드이지만 어떻게 하면 더 간결하고, 가독성이 좋게 코드를 작성할 수 있을지 생각하는게 관건인 것 같다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX (0) | 2024.10.10 |
|---|---|
| [JavaScript] json 화면 구현 (0) | 2024.10.10 |
| [JavaScript] Search Filter (0) | 2024.10.10 |
| [JavaScript] 정렬 (7) | 2024.10.09 |
| [JavaScript] JavaScript 기본 다지기 (0) | 2024.10.09 |