<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!-- <div class="col-sm-4">
<img src="https://via.placeholder.com/600">
<h5>Card title</h5>
<p>가격 : 70000</p>
</div> -->
</div>
</div>
<div class="container">
<button class="btn btn-danger">What's your problem?</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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" },
];
function 내용(받아옴) {
받아옴.forEach((a, i) => {
var 카드 = `<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100" />
<h5>${a.title}</h5>
<p>${a.price}</p>
</div>`;
$(".row").append(카드);
});
}
내용(products);
for (var n = 0; n < 3; ) {
$(".btn").on("click", function () {
n++;
});
if (n == 0) {
$.get("https://codingapple1.github.io/js/more1.json").done(function (
data
) {
내용(data);
});
} else if (n == 1) {
$.get("https://codingapple1.github.io/js/more2.json").done(function (
data1
) {
내용(data1);
$(".btn").css("display", "none"); // 계속 첫번째 실행에 머무른다
});
}
}
//더보기 버튼을 유저가 몇번눌렀냐에따라 요청하는 url이 달라져야 함 , 그리고 버튼은 사라짐
//심심하면 유사한 코드 줄여보기 함수화 할때 변수 있으면 파라미터로 바꾸는게 좋음
</script>
</body>
</html>
