https://hjw1191.github.io/data//data.json(데이터주소)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="product-cards" class="row"></div>
<div class="container mt-3">
<button class="btn btn-danger" id="filter">6만원이하</button>
<button class="btn btn-danger sort">가격순</button>
<button class="btn btn-danger" id="more">더보기</button>
</div>
</div>
<script>
var products = []; // 제품 배열 초기화
var allData = []; // 모든 데이터를 저장할 배열
function 상품목록(productArray) {
var cardGroup = document.getElementById('product-cards');
productArray.forEach(product => {
var card = document.createElement('div');
card.className = 'col-4 mb-4'; // 카드가 3열로 배치되도록 설정
card.innerHTML = `
<div class="card h-100">
<img src="https://via.placeholder.com/600" class="card-img-top">
<div class="card-body">
<h5 class="card-title" id='cardtitle'>${product.title}</h5>
<p class="card-text">상품명: ${product.title}</p>
<p class="card-text">가격: ${product.price}원</p>
<button class="btn btn-danger buy">구매하기</button>
</div>
</div>
`;
cardGroup.appendChild(card);
});
}
// 초기 제품 카드 생성
var clickCount = 0;
function 데이터() {
.done((data) => {
allData = data; // 모든 데이터를 저장
초기제품(); // 첫 번째 데이터 배치를 로드
});
}
function 초기제품() {
var start = clickCount * 3;
var end = start + 3;
var currentBatch = allData.slice(start, end);
if (currentBatch.length > 0) {
상품목록(currentBatch);
clickCount++;
}
if (clickCount >= 3) {
$('#more').hide(); // 더 이상 불러올 데이터가 없으면 버튼 숨기기
}
}
// 초기 데이터 로드
데이터();
$('#more').click(function(){
초기제품();
});
$(".sort").click(function(){
$('#product-cards').html('') // 내용초기화
allData.sort(function(a,b){
return a.price-b.price;
});
상품목록(allData.slice(0, clickCount * 3));
})
$('#filter').click(function(){
var newProduct = allData.filter(function(a){
return a.price <= 60000
});
$('#product-cards').html('');
상품목록(newProduct.slice(0, clickCount * 3));
});
$(document).on('click', '.buy', function() {
var productTitle = $(this).siblings('h5').text();
localStorage.setItem(productTitle, productTitle);
console.log(productTitle);
});
</script>
</body>
</html>
구매하기 >
로컬저장
- $('.buy').click(function(){ ... }): 코드가 실행되는 시점에 DOM에 있는 .buy 클래스를 가진 요소에만 이벤트를 바인딩합니다. 따라서 동적 요소에는 적용되지 않습니다.
- $(document).on('click', '.buy', function(){ ... }): DOM 전체에 이벤트를 바인딩하고, 이벤트가 발생할 때 .buy 클래스를 가진 요소에 대해 이벤트를 처리합니다. 따라서 동적으로 생성된 요소에도 적용됩니다.
'자바스크립트' 카테고리의 다른 글
| 자바> 기능 연습 1일차 (0) | 2024.07.17 |
|---|---|
| 자바스크립트> 정리 (0) | 2024.07.15 |
| 자바스크립트 > switch 사용법 (0) | 2024.07.10 |
| 자바스크립트> 캐러셀에 스와이프 기능 만들기 (터치와 간편한라이브러리) (1) | 2024.07.10 |
| 자바스크립트>스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기 (0) | 2024.07.10 |