2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2024년 7월 16일 18:07 #128320
코초참가자//JSON데이터를 저장할 배열 변수 let Ddata = []; let count = 1;
//JSON데이터를 받아와 카드폼에 데이터를 기입 후 카드폼 정렬 function CardArray(Para){ for(let i=0; i < Para.length; i++){ var CardData = `<div class="card CardBatch" id="CDrag" style="width: 18rem;" draggable="true" ondragstart="drag(event)"> < img src="${Para[i].photo}" class="card-img-top"> <div class="card-body CardBatch"> <h5 class="card-title">${Para[i].title}</h5> <p class="card-text">${Para[i].brand}</h5> <p class="card-text">가격 : ${Para[i].price}</p> <button type="button" class="btn btn-primary buy">담기</button> </div> </div>`; $('.row').append(CardData); } }
//오브젝트형인 JSON데이터를 AJAX로 받아와 오브젝트형 안의 배열 키의 데이터만 추출 $.get('store.json').done(function(data){ Ddata = data.products; CardArray(Ddata); //담기 버튼 눌렀을 때 상품카드가 장바구니에 복사되어 수량 칸도 보이게 for(let i = 0; i < Ddata.length; i++){ $('.buy').eq(i).on('click', function(){ var StorageData = `<div class="card CardBatch" id="CDrag" style="width: 18rem;" draggable="true" ondragstart="drag(event)"> < img src="${Ddata[i].photo}" class="card-img-top"> <div class="card-body CardBatch"> <h5 class="card-title">${Ddata[i].title}</h5> <p class="card-brand">${Ddata[i].brand}</h5> <p class="card-text">가격 : ${Ddata[i].price}</p> <input type="text" class="form-control">수량 : ${count}</input> </div> </div>`; $('.storage').append(StorageData); }) } } 드래그 앤 드롭 기능을 구현하다 좋은 방법이 떠오르지 않아 담기 버튼을 눌렀을 때 장바구니에 추가하는 방법을 먼저 구현해보고 있었습니다. 그래서 담기버튼을 눌렀을 때 장바구니에 새로운 카드폼을 생성하는 작업까지는 했는데, 상품명과 브랜드, 가격, 수량은 나오지 않아서 어떻게 해야될 지 고민이 되어 질문드립니다. 개발자 도구로 elements 확인해보니 잘 생성은 된거 같습니다..
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.