4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2022년 12월 13일 22:51 #58128
조승현참가자선생님 안녕하세요. 어제 질문 드렸던 담기 버튼 눌르면 새로운 어레이에 저장해서 장바구니에 담는 기능은 해결했습니다 ! 이제 장바구니에 담은 후에 <input type="number"> 값을 195번째 줄처럼 input event를 사용하여 array basket의 데이터 amount 값을 변경하려고 하는데 append로 추가한 input event를 어떻게 사용 가능한가요?? 지금 $(".item-count").on('keyup input', function(){ // handle event console.log("1"); }); 이렇게 확인하면 콘솔에 1이 찍히지 않습니다 ㅜ <!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){ const found = (element) => element.title == a.title; console.log(basket.findIndex(found));if(basket.findIndex(found) > -1){ basket[basket.findIndex(found)].amount = basket[basket.findIndex(found)].amount + 1; } else{ basket.push(obj); } console.log(basket);$(".shopbox").html(""); $(".price-text").html(""); let price = null; basket.forEach(function(basket, i){ price += basket.price * basket.amount; let shopingbox = `<li draggable="true" ondragstart="drag(event)" id="0"> <div class="imgbox"> < img src="./${basket.photo}"> </div> <div class="textbox"> <h5>${basket.title}</h5> <span>${basket.brand}</span> <p>가격 : ${basket.price}</p> <div class="addbox"> <input type="number" name="num" class="item-count" value=${basket.amount}> <button id="${basket.id}" class="add">담기</button> </div> </div> </li>`; $(".shopbox").append(shopingbox); $(".price-text").html(`<span>합계 : ${price}원</span>`) })} })
// 장바구니 수량 버튼 클릭 추가 $(".item-count").on('keyup input', function(){ // handle event console.log("1"); }); }) })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)); } // window.addEventListener('change', function(e) { // console.log('change event with value:', e.target.value); // }); </script> </body> </html> -
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.