Javascript
상품요청버튼 기능, 상품 더보기 레이아웃
breeghty
2023. 2. 23. 17:54
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
</div>
</div>
<div class="container">
<button class="btn btn-danger" id="more">더보기</button>
</div>
<!-- script -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
var products =[
{id:0, price: 70000, title: 'Blossom Dress'},
{id:1, price: 50000, title: 'Springfield Shirt'},
{id:2, price: 60000, title: 'Black Monastery'}
];
/* let htmlContent = `<div class='col-sm-4'>
<img src='https://via.placeholder.com/600' class='w-100'>
<h5>Card title</h5>
<p>가격 : 70000</p>
</div>`;
for(let i=0;i<3;i++){
document.querySelector('.row').insertAdjacentHTML('beforeend', htmlContent);
}
*/
products.forEach((data)=>{
let htmlContent = `<div class='col-sm-4'>
<img src='https://via.placeholder.com/600' class='w-100'>
<h5>${data.title}</h5>
<p>가격 : ${data.price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', htmlContent);
});
// object를 받아 상품명과 가격이 담긴 박스를 생성하는 함수
function itemMaker(obj){
obj.forEach((item)=>{
let htmlContent = `<div class='col-sm-4'>
<img src='https://via.placeholder.com/600' class='w-100'>
<h5>${item.title}</h5>
<p>가격 : ${item.price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', htmlContent);
});
}
//한번 클릭시 상품 3개 더보기, 두번 클릭시 3개 더보기.
let clickCount = 0;
$('#more').click(function(){
clickCount++;
if(clickCount == 1){
$.get('https://codingapple1.github.io/js/more1.json')
.done(function(data){
// console.log(data);
// console.log(data[0].price);
itemMaker(data);
}).fail(function(){
console.log("error");
});
}else if(clickCount == 2){
$.get('https://codingapple1.github.io/js/more2.json')
.done(function(data){
// console.log(data);
// console.log(data[0].price);
itemMaker(data);
}).fail(function(){
console.log("error");
})
//더보기버튼 사라지기
document.getElementById('more').style.display = 'none';
}
})
</script>
</body>
</html>