선생님이 알려주신 콜백함수와 var count = 0;으로 한 다음에 클래스추가해서 버튼을 숨기는
코드를 다음과 같이 짜봤습니다:
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
// row라는 div 안에 상품목록 3개 만들어오기(자바스크립트로 html 생성하는 문법으로)
// 우선 클래스 태그를 만들어야 할듯...?
// 먼저 row 클래스에 template을 달아놓는다(근데 3개를 만들어야됨)
products.forEach((a,i) => {
var template = `<div class="col-sm-4">
< img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<P>가격: ${products[i].price}</p>
</div>`;
$('.row').append(template);
})
</script>
<div class="container">
<button class="btn btn-danger" id="more">더보기</button>
</div>
<script>
var count = 0;
$('#more').click(getData);
// 더보기 2회 누르면 7,8,9번째 상품 더 가져오기(count로 버튼 횟수 기록해야할듯) and 버튼 안보이게(클래스 추가시켜서 none값)
function getData(){
count++;
if (count == 2) {
$('.btn').addClass('hide');
}
$.get(`https://codingapple1.github.io/js/more${count}.json`).done((data) => {
// data도 products와 같은 자료형임
data.forEach((a,i) => {
var template = `<div class="col-sm-4">
< img src="https://via.placeholder.com/600" class="w-100">
<h5>${data[i].title}</h5>
<P>가격: ${data[i].price}</p>
</div>`;
$('.row').append(template);
})
})
}
</script>
P.S: 아 추가로, 태그뭉치를 변수에 저장하고 백틱을 써서 동적으로 조작하는 것은
정말 좋은 것 같습니다. 아직 가야할 길은 멀지만, 선생님의 말씀대로 한글로 먼저
해야할 일을 적은 다음에, 자바스크립트 언어로 차근차근 번역하고 console.log로 찍어보니
단계별로 코드를 짤 수 있는 것 같습니다 정말 감사합니다 끝까지 완강하겠습니다
