2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2022년 12월 12일 22:12 #57981
조승현참가자안녕하세요 선생님 ~ 장바구니 드래그는 힌트 봐서 어찌어찌 처리했는데, 상품의 담기를 눌르면 누른 상품의 데이터만 새로운 변수에 push해주고 싶은데 그게 맘처럼 되지 않네요. 어떤 방법으로 처리해야 할까요? basket[i].title 에 기존 데이터가 있으면 amount 를 += 1 해주고 없으면 push 해주고 싶은데.. basket 데이터에 없는 값을 입력하니 에러가 나타나서 어떻게 조건을 짜야할지 막막하네요. // 장바구니 담기 버튼 클릭 추가 <- 여기 주석 부분 입니다.. !!
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <title>2022-11-15</title>
<style> *{padding:0;margin:0;list-style:none;text-decoration:none;box-sizing:border-box;} body{} header{height:60px;background-color:#000;color:#fff;padding:0 10px;} header .headerbox{display:flex;width:1400px;margin:0 auto;align-items:center;} header h1{line-height:60px;font-size:24px;margin-right:20px;} header nav ul{display:flex;} header nav ul li:not(:last-child){margin-right:15px;} header nav ul li a{color:#fff;}section{padding:20px;background-color:#f1f1f1;} .contentbox{margin:0 auto;width:1400px;} section .searchbox{margin-bottom:20px;} section .searchbox input{height:40px;line-height:40px;font-size:16px;}section .productbox ul{display:flex;} section .productbox ul li{width:23.5%;margin-right:2%;background-color:#fff;padding:20px;box-sizing:border-box;} section .productbox ul li:nth-child(4n){margin-right:0;} section .productbox ul li .imgbox img{width:280px;height:200px;} section .productbox ul li .textbox{margin-top:20px;} section .productbox ul li .textbox h5{font-size:20px;} section .productbox ul li .textbox span{color:#b9b9b9;} section .productbox ul li .textbox p{margin:10px 0;} section .productbox ul li .textbox button{background-color:#000;color:#fff;border-radius:5px;padding:5px 10px;cursor:pointer;}section .shopingbox{margin-top:20px;padding:20px;background-color:#e5e5e5} section .shopingbox .shopbox{width:100%;background-color:#000;min-height:300px;} section .shopingbox .shopbox p{line-height:300px;text-align:center;color:#fff;font-size:24px;font-weight:bold;} section .shopingbox h3{margin-bottom:20px;} .addbox input{display:none;}.shopbox{display:flex;} .shopbox li{width:23%;margin:5% 1%;background-color: #fff;padding: 1%;} .shopbox li img{width:280px;height:200px;} .shopbox .textbox{color:#000;width:280px;text-align: center;} section .shopingbox .shopbox p{color:#000;font-size:18px;font-weight:normal;} .shopbox p{line-height:1 !important;} .shopbox .addbox input{display:inline-block;} .shopbox .addbox .add{display:none;} </style> </head> <body> <header> <div class="headerbox"> <h1>집꾸미기</h1> <nav></nav> </div> </header> <section> <div class="contentbox"> <article> <div class="searchbox"> <input type="text" name="search" placeholder="검색어입력" /> </div> <div class="productbox"><script> let basket = []; $.get('./store.json').then(function(data){ // 상품목록 노출 append data.products.forEach(function(a, i){ let products = data.products; let productList = `<li draggable="true" ondragstart="drag(event)" id="${a.id}"> <div class="imgbox"> < img src="./${a.photo}" /> </div> <div class="textbox"> <h5>${a.title}</h5> <span>${a.brand}</span> <p>가격 : ${a.price}</p> <div class="addbox"> <input type="number" name="num" class="item-count" /> <button id=${a.id} class="add">담기</button> </div> </div> </li>`; $(".productbox > ul").append(productList); // 검색기능 $('.searchbox input').on('keyup', function(e){ if(a.title.indexOf(e.target.value) > -1 || a.brand.indexOf(e.target.value) > -1){ let searchInput = e.target.value; let searchTitle = a.title; let searchTitle2 = searchTitle.replace(searchInput,`<span>${searchInput}</span>`) $(".productbox > ul").html(""); $(".productbox > ul").append(productList); $(".productbox > ul h5").html(searchTitle2); } if(e.target.value === "" || e.target.value === undefined){ $(".productbox > ul").html(""); data.products.forEach(function(a, i){ let productList = `<li draggable="true" ondragstart="drag(event)" id="${a.id}"> <div class="imgbox"> < img src="./${a.photo}" /> </div> <div class="textbox"> <h5>${a.title}</h5> <span>${a.brand}</span> <p>가격 : ${a.price}</p> <div class="addbox"> <input type="number" name="num" class="item-count"/> </div> </div> </li>`; $(".productbox > ul").append(productList); }) } })// 장바구니 담기 버튼 클릭 추가 $(".add").on('click', function(e){ let obj = Object.assign({}, a, {amount : 1}); // console.log(i) //let 몇번째 = basket.findIndex((a)=>{ return a.id == e.target.id }) //console.log(몇번째) if(e.target.id == a.id){ //console.log(i) for(let i=0; i<data.products.length;i++){ console.log(i) if(basket[i] == undefined){ if(basket[i].amount > 0){ basket[i].amount += 1; } } // if(basket[i].id == a.id){ // a.amount += 1; // } else{ // basket.push(obj); // } } console.log(basket); // if(basket[i] == undefined){ // basket.push(obj); // console.log(basket)// } // if(basket[i].amount >= 0){ // basket[i].amount += 1; // console.log(basket) // } } //console.log(basket) }) }) })function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); console.log(ev.target.id); }function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>2022년 12월 13일 09:57 #58033
codingapple키 마스터장바구니에 [{amount : 1}, {amount : 1} ...] 이것만 저장하고있는거같은데 {id : 0, amount : 1} 상품번호까지 같이 저장하면 찾기쉬울 수 있습니다 -
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.