const seatContainer = document.querySelector('.select-seat .seat-container');
let test = [];
let selectedSeats =[]; // 선택되어있는 '좌석번호' 담음
let selectedSeatsMap = [];
let clicked = ""; // 선택되어있는 좌석 '태그' 담음
let div = "";
for (let i = 0; i < 7; i++) {
div = document.createElement("div");
seatContainer.append(div);
for (let j = 0; j < 10; j++) {
const input = document.createElement('input'); // 좌석이 될 요소
input.type = "button";
input.name = "seats"
input.classList = "seat";
//3중포문을 사용하지 않기위해
mapping(input, i, j); // 좌석 요소에 A0, A1. .. B0, B1 ... 값 넣어준
div.append(input);
input.addEventListener('click', function(e) {
console.log(e.target.value);
//중복방지 함수 - indexOf는 해당하는 요소의 첫 번째 인덱스 반환. -> 두 번째로 들어간 똑같은 요소는 배열에 안 들어감!
selectedSeats = selectedSeats.filter((element, index) => selectedSeats.indexOf(element) != index);
//click class가 존재할때(제거해주는 toggle)
if (input.classList.contains("clicked")) {
input.classList.remove("clicked");
clicked = document.querySelectorAll(".clicked"); // clicked에 선택되어있는 '요소' 담음
clicked.forEach((data) => {
selectedSeats.push(data.value); // selectedSeats에 선택되어있는 요소 '좌석번호' 담음
});
} else { //click class가 존재하지 않을때 (추가해주는 toggle)
input.classList.add("clicked");
clicked = document.querySelectorAll(".clicked"); // clicked에 선택되어있는 '요소' 담음
clicked.forEach((data) => {
selectedSeats.push(data.value); // selectedSeats에 선택되어있는 요소 '좌석번호' 담음
})
} // if
console.log(selectedSeats);
}); // addEventListener
} // for
} // for
function mapping(input, i, j) {
if (i === 0) {
input.value = "A" + j;
} else if (i === 1) {
input.value = "B" + j;
} else if (i === 2) {
input.value = "C" + j;
} else if (i === 3) {
input.value = "D" + j;
} else if (i === 4) {
input.value = "E" + j;
} else if (i === 5) {
input.value = "F" + j;
} else if (i === 6) {
input.value = "G" + j;
}
}
참고
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [ CSV 파일 파싱 - 카카오 맵 API에 CGV 좌표 표시 ] (0) | 2022.05.29 |
---|---|
JS - [ CSV 파일 불러오기 ] (0) | 2022.05.28 |
JS - [ 오늘부터 14일간 날짜 출력 ] (0) | 2022.05.24 |
JS - [ Swiper 라이브러리 ] (0) | 2022.05.03 |
JQuery - [ DB정보 JSON 형태로 변경 ] (0) | 2022.05.02 |