$.get('store.json').done(function(data){
console.log(data);
// `data.items` 대신 `data.products`를 사용해야 합니다.
data.products.forEach((a,i)=>{
var 템플릿 =
`<div class="card">
<div class="card">< img src="${a.photo}">
<p class="card-text">${a.title}</p>
<p>${a.brand}</p>
<p>가격 : ${a.price}</p>
</div>
<button type="button" class="btn btn-danger btn-jang" id="products${i}">담기</button>
</div>`;
$('.card-box').append(템플릿);
});
});
// 이벤트 위임을 사용하여 동적으로 생성된 버튼에 이벤트 리스너를 설정합니다.
$(document).on('click', '.btn-jang', function(){
var buttonId = $(this).attr("id");
switch (buttonId) {
case 'products0':
console.log('1임!');
break;
case 'products1':
console.log('2임!');
break;
case 'products2':
console.log('3임!');
break;
case 'products3':
console.log('4임!');
break;
default:
console.log('암것도 아님!');
}
});
js강의 마지막 예제 하면서 담기버튼 누르면 밑에 장바구니에 담기게 하는거 테스트 중에 안되가지고 채찍피티한테 물어봤더니 이벤트 위임 어쩌구 하면서 이렇게 바꿔줍니다.
근데 이벤트 위임이란게 뭔지 잘 모르겠습니다.
