2)영화관 만들기 - 예매 페이지 구현 과정(자바스크립트 사용)

기본적인 a태그를 이용

아이디 생성,a href를 이용해서 자바스크립트 이용, 그리고 class를 이용해서 체크됐는지 확인

 

클릭했을 때 빨간색으로 변한다.

 

처음에 해결하지 못했던 내용이였다.

A를 클릭했을 때 A의 색은 빨간색으로 변하고 // 다시 B를 클릭했을 때, A의 색은 기본 색상으로 돌아가고 B의 색이 빨간색으로 변하게 하는 거에서 하루~하루반을 고민했던 거 같다.

 

<input type="hidden" name="subject"> 을 이용해서 거기에 있는 밸류를 체크하면 어떨까? 라는 생각을 했었는데,

일단 그거에 대한 문제점은 id를 이용해서 색을 바꾸는 건데, id가 1~2개면 내가 일일히 id값을 다 지정해서 색깔을 바꿀 수 있는데 , 영화 제목이 20~30개면 그걸 스크립트 안에 다 받는다는게 말이 안되기 때문에 포기했다.

(이 방식은 내가 영화를 0~2명까지 구매할 수 있는데 그 때 사용했던 방법을 이용하려고 했었던 거임)

 

예를들면 ) 영화가 아바타,공조2 딱 2개만있다고 가정해보자.

내가 span id에 설정한 id값은 DB에서 차례대로 가져오는 id를 그대로 넣었기 때문에

var subjectColor1 = document.getElementById('abata');

var subjectColor2 = document.getElementById('gongjo2'); 이런식으로 지정할 수 있는데,

 

<script>

function focusSubject(subject) {

var subjectColor1 = document.getElementById('abata');

var subjectColor2 = document.getElementById('gongjo2');

 

var selectId = document.getElementById(subject);

selectId.value = subject;로 

<input type="hidden" name="subject">의 값을 넣고

if (selectId == 'gongjo2' ) {

subjectColor2.style.color = 'black';

 subjectColor2.style.color = 'red';

}else {

subjectColor2.style.color = 'red';

 subjectColor2.style.color = 'black';

}

</script>

이런식으로 할 수 있는데 제목이 20개가 넘어가면 이건 너무 쓸모없는 방법이라 더 고민해보고 생각해봤다.

 

내가 따라하는 사이트는 CGV인데 CGV의 소스를 보고 고민해보니까 class를 이용하는 것을 발견했다.

클릭한 제목에 class가 selected가 생성,

클릭한 거에 class = selected , 클릭하지 않은 제목들은 class=""인 거를 발견하고!!

아 class를 이용해서 할 수 있구나! 라고 생각했는데

 

어떻게 class를 조작하고 하는지에 대한 고민을 엄청 많이 하고 9시간 넘도록 해결하지 못했다..

 

class 조작에 관한 구글을 많이 찾아봤고 그러다가 내가 클릭한 거 외에는 모든 class를 제거하고, 클릭한 제목에 다시 class를 입혀주는 방식을 깨닫고 그 방법대로 적용했다.

subject에는 checkSubject라는 클래스 , branch에는 checkBranch라는 클래스로 색을 표현함.

 

checkSubject를 배열로 생성하고, 전부 제거하고 다시 추가하는 과정

checkSubject라는 클래스를 배열에 담아서 classList.remove를 통해서 전부 제거한 후,

 

내가 클릭한 제목에만 마지막에 다시 add를 이용해서 checkSubject클래스를 추가해주면 된다!

 

이렇게 간단한 거였는데 혼자 힘으로 해결을 못했던게 좀 찝찝하지만 그래도 이런 과정들을 통해서 계속 성정하고 있다고 생각한다

 

class 성공!

이제 CGV처럼 제목을 눌렀을 때 지역 날짜, 

 

지역을 눌렀을 때 , 제목 날짜

 

날짜를 눌렀을 때, 제목 지역 정보를 누른 정보에 맞게 변하는 것만 해결하면 된다!