상담 내역이 있으면 꽁꽁 얼려라!

자 오늘은 새로운 방법으로 접근하는 방법을 방법론적으로 방법으로 알아보자.

 

지금 맨정신이 아니므로 약간 약빤듯한 고론 느낌이 될수도 있다.

 

일단 하려고 하는것은 

 

일정한 배열안에 학교 이름이 들어가 있는데 

 

이 값은 학생의 고유한 상담 내역 이고 , 변하지 않는 값이다.

 

즉 날짜마다 그 값은 일정한 것이다 .

 

그래서 이것을 비교해서 만약 상담내역이 있었을때, 

 

그 당일에 상담 내역을 전부 비활성 시켜야하는 스크립트를 작성 하려고 한다.

 

        const studentHasReservation ={{ reserved_univ|safe }}
        const getUniReservationDataId = document.querySelector('.reservation_btn_wrap')
        let innerDataIdText = getUniReservationDataId.getAttribute('data-id')
        const getUniReservationThisButton = document.querySelectorAll(`[data-id="${studentHasReservation}"] .time_button`)
        if (studentHasReservation) {
            for (let i = 0; i < studentHasReservation.length; i++) {
                if (studentHasReservation[i] == innerDataIdText) {
                    for (let j = 0; j < getUniReservationThisButton.length; j++) {
                        getUniReservationThisButton[j].classList.add('dissable_btn_of_reverlation')
                        getUniReservationThisButton[j].disabled = true
                    }
                }
            }
        }

 

일단 풀코드를 보고가자.

 

지금은 킹왕짱 장고왕 백앤든데 프론트까지 할줄 아시는 사수 분이랑 작업을 하고있다.

 

이분이 {{ reserved_univ|safe }} 이 값을 통해 상담 내역을 나한테 뿌려주고있다.

 

배열의 양식은 간단하다.

 

[중앙대학교,서울대학교,이것저것학교]

 

이런식으로 배열이 만들어져서 넘어오고 있다 .

const getUniReservationDataId = document.querySelector('.reservation_btn_wrap')

요곳은 상담존의 타임테이블 버튼중 가장 상위 워랩을 가져와

 

const innerDataIdText = getUniReservationDataId.getAttribute('data-id')

 

getAttribute 로 data-id값을 가져온다.

 

가져온뒤 이값들은 추후 사용되니 기다리자.!

 

const getUniReservationThisButton = document.querySelectorAll(`[data-id="${studentHasReservation}"] .time_button`)

 

이번에 이 작업을 하면서 

 

queryselectorall에 대한 선택자를 더 찾아보게 된거 같다 .

 

예를들어 css 처럼 

 

#mother .sun .sun_of_sun 이런 느낌으로도 선택이 가능한것이다.

 

참고자료 요기!

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors

선택자로 DOM 요소 선택하기

 

 

쨋든 지금부터 내가 생각했던 로직을 설명하려한다.

 

우선적으로 저 킹왕짱 백앤드분이 넘겨주신 값을 포문으로 돌려 하나하나 비교를 해야한다.

 

그뒤 아까 가져왔던

 

innerDataIdText 이것이랑 비교를한다

 

그뒤에 서로 같다면 

 

버튼을 비활성 시키고,  내가 만든 css 속성을 추가하면 된다.

 

이렇게 말로 설명하면 이해가 안가는 사람덜이 있기때문에,

 

if (studentHasReservation) {  //상담내역이 있을때 
            for (let i = 0; i < studentHasReservation.length; i++) { // 백앤드 분이 던진 작은공
                if (studentHasReservation[i] == innerDataIdText) { // 작은공과 값 비교
                    for (let j = 0; j < getUniReservationThisButton.length; j++) { // 작은공과 저 버튼의 렝스는 같지 않기에 for문을 2번 돌려준다. 다른방법이 있으면 말해주면고맙겠댜!
                        getUniReservationThisButton[j].classList.add('dissable_btn_of_reverlation') //css 추가
                        getUniReservationThisButton[j].disabled = true // disabled 추가
                    }
                }
            }
        }

 

쨋든 요론 느낌이구, 

 

질문은 없다

 

왜냐?

 

 

진짜 자주 쓸려고 하는데 맨날 써야지 써야지 하는데 정신이 없다, 

 

이 블로그는 쓰는 이유는 내가 썻던 기술스택들을 까먹지 않기위해 작성을 하는거니깐 

 

반말 존댓말 섞여있다고 안 불편해 했으면 좋겠댜~

 

정리가 그렇게 잘 되어 있는것도 아니고 

 

목적은 딱 하나 

 

내가 썼던것들을 까먹지말자!

 

이 목표로 작성중이니 

 

양해부탁

 

그럼