3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
추가할상품 변수 선언이 제대로 안 되는데 도저히 원인을 못 찾겠네요.. 혹시나 해서 껐다 켜보기도 하고 캐쉬도 지워봤는데 감감무소식입니다. ㅜ
아래는 원문입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link href="css/last.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body style="background: #eee; margin: 0px; padding: 0px;">
<nav class="nav"> <h4>집꾸미기</h4> <button>Home</button> <button>Store</button> <button>시공견적</button> <div style="clear: both;"></div> </nav>
<div class="container"> <form id="search" style="margin-bottom: 20px;"> <input type="text" placeholder="검색어 입력"> <button type="button">검색</button> </form>
<div class="product-wrap"> <!--<div class="product-box"> < img src="https://via.placeholder.com/600"> <h3>식기세척기</h3> <p>세척나라</p> <h4>가격: 10000원</h4> <button>담기</button> </div> --> </div> <div style="clear: both;"></div>
<div class="cart"> <h3>장바구니</h3> <div class="cart-box"> <p>여기에 드래그</p> </div> </div>
</div>
<script>
var products = []; var cartArray = [];
$.get('store.json').then((data) => {products = data.products;
makeTemplate(products);
$('#search').change(function(){ let search = $('#search input').val(); let newArray = products.filter(a => a.title.indexOf(search) != -1); $('.product-wrap').html(''); makeTemplate(newArray, search); });$('.add').click(function(e){ let productId = e.target.dataset.id;let 몇번째 = cartArray.findIndex((a) => { return a.id == productId }); if(몇번째 == -1){ let 추가할상품 = products.find((a) => { return a.id == productId }); console.log(추가할상품); 추가할상품.count = 1; cartArray.push(추가할상품); } else { cartArray[몇번째].count++; }$('.cart-box').html(''); cartArray.forEach((a, i) => { let template = ``; template = template + ` <div class="product-box" draggable="false"> < img src="${a.photo}"> <h3>${a.title}</h3> <p>${a.brand}</p> <h4>가격: ${a.price}원</h4> <input type="number" value="${a.count}"> </div> `; $('.cart-box').append(template); }); });function makeTemplate(array, um){ let template = ``; array.forEach((a, i) => { let miniTemplate = ` <div class="product-box" draggable="true" ondragstart="drag(event)" data-id="${a.id}"> < img src="${a.photo}" draggable="false"> <h3 draggable="false">${a.title}</h3> <p draggable="false">${a.brand}</p> <h4 draggable="false">가격: ${a.price}원</h4> <button draggable="false" class="add">담기</button> </div> `; if(um != undefined){ miniTemplate = miniTemplate.replace(`<h3>${miniTemplate.split('<h3>')[1].split('</h3>')[0]}</h3>`, `<h3>${a.title.replace(um, `<span class="highlight">${um}</span>`)}</h3>`) } template = template + miniTemplate; }); $('.product-wrap').append(template); }});
</script>
</body> </html>
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.