2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 8월 22일 17:56 #95478
조원희참가자<html>
<h3>상품권 선택</h3> <ul class="gift-choice"> <li class="mt"> <li class="mt"> <li class="mt"> <li class="mt"> <li class="mt"> <li class="mt"> <li class="mt"> <li class="mt"> <div class="tity-con tity-show"> </div>
<div class="gift-amount"> <h3>총 상품가격</h3> <div class="mount"> <h4>0</h4><span>원</span> </div> </div> </div>
</div> </html> <script> var mount = [ {id: 0, title: '구글 기프트 5천원', price: 5000, name: '5,000원'}, {id: 1, title: '구글 기프트 1만원', price: 10000, name: '10,000원'}, {id: 2, title: '구글 기프트 1만5천원', price: 15000, name: '15,000원'}, {id: 3, title: '구글 기프트 3만원', price: 30000, name: '30,000원'}, {id: 4, title: '구글 기프트 5만원', price: 50000, name: '50,000원'}, {id: 5, title: '구글 기프트 10만원', price: 100000, name: '100,000원'}, {id: 6, title: '구글 기프트 15만원', price: 150000, name: '150,000원'}, {id: 7, title: '구글 기프트 20만원', price: 200000, name: '200,000원'} ]function tem (a , b , c, id){let temtem = `<div class="tity" data-id="${id}"> <div class="tity-title"> <p class="ttg">${a}</p> </div> <div class="tity-number"> <div class="count-wrap _count"> <button type="button" class="minus" id="m">감소</button> <input type="text" class="inp" value="1" data-price="${b}" readonly> <button type="button" class="plus" id="p">증가</button> </div> </div> <div class="tity-mount"> <h4>${c}원</h4> <div class="del"> < img src="/image/x.png" alt=""></div> </div> </div> </div>`; return temtem; }let stay = []; // 배열을 사용하여 선택한 상품들을 저장
// 선택한 상품의 배열을 stay 저장하는 함수 function isItemAlreadySelected(item) { return stay.some(selectedItem => selectedItem.id === item.id); }// 상품선택 반복문 mount.forEach((a, i) => { const listItem = $('.mt').eq(i); listItem.html(a.name);listItem.on('click', function () { if (isItemAlreadySelected(a)) { alert('이미 추가되었습니다.'); return; } stay.push(a); //선택한 상품 stay 어레이 에 저장let tm = tem(a.title, a.price , a.price.toLocaleString(), a.id); $('.tity-con').append(tm); document.querySelector('.tity-con').classList.add('tity-show');//수량 선택
let itembtn = document.querySelectorAll('.count-wrap button');itembtn.forEach(btns => { calc(); //계산btns.addEventListener('click', function(e){let input = this.parentNode.querySelector('input'); // 클릭된 버튼의 부모 노드에서 input 엘리먼트를 찾음 let inv = Number(input.value); let tar = this.className; let price = this.parentNode.parentNode.parentNode.querySelector('.tity-mount h4'); let tol = input.getAttribute('data-price'); if (tar === 'plus' && inv < 9) { input.value = parseInt(inv) + 1; } else if (tar === 'minus' && inv > 1) { input.value = parseInt(inv) - 1; }//상품별 가격 계산 let total = inv * tol; price.innerText = total.toLocaleString() + '원'; //총 상품가격 calc(); // 함수 실행 }); });
//상품 삭제 let delbtn = document.querySelectorAll('.del'); delbtn.forEach(deltbtn => { deltbtn.addEventListener('click', function () { let itemId = this.parentNode.parentNode.getAttribute('data-id'); // 항목 ID 가져오기 console.log(itemId) stay = stay.filter(item => item.id !== Number(itemId)); // stay 배열에서 항목 제거 this.parentNode.parentNode.remove(); // 해당 항목의 HTML 요소 제거 calc(); // 총 가격 재계산 }); });}); });
// 총계산 함수 const calc = () => { let amount = document.querySelectorAll('.tity-mount h4'); talprice = 0; amount.forEach(e => { let toto = Number(e.innerText.replace(/[^0-9]/g, "")) talprice += Number(toto); }); document.querySelector('.mount h4').innerHTML = talprice.toLocaleString(); } </script> 너무 긴 조잡한 코드를 문의드려서 죄송합니다 강의를 전부 수강하고 온라인쇼핑몰 상품 페이지를 만드는 과정중 상품을 선택 하면 수량 조절하는 창이 보여집니다 수량 창이 한개일때는 수량조절이 잘 되지만 수량조절창이 2개일때는 수량조절이 2개씩 되고 수량조절창이 3개일때는 수량조절이 3개씩 되는 버블링 현상 같은데요 아무리 검색을 해봐도 해결을 못하고 있습니다 아니면 처음부터 코드짜는걸 잘못된것일까요?2023년 8월 22일 19:54 #95490
codingapple키 마스터listItem 이란걸 클릭할 때마다 itembtn에 이벤트리스너 계속 부착해주고있어서 그런듯요 한번만 부착합시다
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.