today_is

[ javascript ] 클릭이벤트 본문

front

[ javascript ] 클릭이벤트

ye_rang 2024. 1. 24. 10:17

오늘의 목표

클릭이벤트를 이용하여, 클릭할때마다 정렬기준이 바뀌도록 해보자

 

 

오늘 실습에 사용된 parking.js 파일은 공공 데이터 포털 사이트에서 가져왔습니다 !

 

 

[ 코드해석 ]

 

 

 핵심 

: 하나의 버튼을 이용하여, 오름차순 정렬과 내림차순 정렬 모두 수행할 수 있도록 한다.

 

즉, 홀수번째로 눌렀을때는 오름차순 정렬

짝수번째로 눌렀을때는 내림차순 정렬로 바뀌도록 할 것이다

 

 

 

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)

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>

 

 

study_review

오늘은 하나의 버튼으로 두 가지 기능을 구현하는 로직을 작성했다.

버튼을 누를 때마다 order 변수의 값을 변경하기 위해 곱하거나 더하는 방식을 시도했다.

처음에는 order 값이 홀수일 때와 짝수일 때를 구분해서 다르게 처리하려 했지만, 식이 너무 길어져 고민이 되었다.

그러다가 삼항 연산자를 떠올렸고, 1 또는 -1 값을 기준으로 두어 -1을 곱하는 방식으로 접근하게 되었다.

이 방법을 통해 코드의 길이를 크게 줄일 수 있었다!

 

'front' 카테고리의 다른 글

[ js ] json 파일로 화면 구현  (0) 2024.02.19
[ javascript ] 검색필터  (0) 2024.01.26
[ javascript ] 정렬  (0) 2024.01.22
[ javascript ] 변수 / 상수 / 정렬  (0) 2024.01.21
[ html ] 사이트 따라서 만들어보기  (0) 2023.12.11
'front' Related Articles more