-
글쓴이글
-
2022년 2월 5일 22:12 #26482
박땡땡참가자Html
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title1</h5>
<p class="price">가격 : <span class="price-num">10000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title2</h5>
<p class="price">가격 : <span class="price-num">20000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">Card title3</h5>
<p class="price">가격 : <span class="price-num">30000</span></p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div><script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
]const cardList = document.getElementsByClassName('card');
for(let i=0; i < cardList.length; i++) {
const cardBody = cardList[i].querySelector('.card-body')
const tit = cardBody.querySelector('.title');
const price = cardBody.querySelector('.price .price-num');tit.innerHTML = products[i].title;
price.innerHTML = products[i].price;
}</script>
선생님~~ 저는 이렇게 했는데
부족한 부분이 있으면 피드백 부탁드립니다 😀
감사합니다!
2022년 2월 5일 23:58 #26489
박땡땡참가자선생님 리팩토링을 다시 했는데요!
<body>
<div class="card-group container">
</div>
<div class="container mt-5">
<button id="sortPrice">가격순정렬</button>
<button id="sortText">가나다순</button>
<button id="filterPrice">6만원이하</button>
</div>
</body><script>
const products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
]
prodDataBinding();
function prodDataBinding(arr) {
let cardGroup = document.querySelector('.card-group');
cardGroup.innerHTML = '';
for(let i=0; i < products.length; i++) {
const cardTemplate = `<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${products[i].title}</h5>
<p class="price">가격 : ${products[i].price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
cardGroup.innerHTML += cardTemplate;
}
}
//가격정렬
const sortPrice = document.querySelector('#sortPrice')
sortPrice.addEventListener('click', function(){
products.sort(function(a,b) {
return a.price - b.price;
});
prodDataBinding();
});//가나다순
const sortText = document.querySelector('#sortText');
sortText.addEventListener('click', function(){
const newSortText = products.sort(function(a,b) {
return a.title > b.title;
});
prodDataBinding();
});//6만원이하
const filterPrice = document.querySelector('#filterPrice');
filterPrice.addEventListener('click', function(){
const newFilterPrice = products.sort(function(a,b) {
return a.title > b.title;
});
prodDataBinding();
});</script>
저는 prodDataBinding()이라는 함수를 써서 html을 만드는 반복 작업을 쉽게 호출하도록 했는데..!
버튼 클릭시 newSortText나 newFilterPrice 변수의 리턴값을 prodDataBinding()함수의 인자로 동적으로 보내주고 싶은데
어떻게 보내줘야 할지 모르겠습니다 ㅠㅠ
2022년 2월 6일 10:00 #26506
codingapple키 마스터prodDataBinding(newFilterPrice); 이렇게 사용하면 되고
함수안에선 products 말고 arr라는 파라미터를 반복문 돌려서 사용하면 될듯요
[...products].sort() 이렇게 정렬하면 원본을 건드리지 않아서 더 안전할 수도 있습니다
2022년 2월 6일 12:16 #26517
박땡땡참가자선생님 스크립트 코드 다시 수정했는데요!!
<script>
const products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
]
prodDataBinding();
function prodDataBinding(arr = products) {
let cardGroup = document.querySelector('.card-group');
cardGroup.innerHTML = '';
for(let i=0; i < arr.length; i++) {
const cardTemplate = `<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${products[i].title}</h5>
<p class="price">가격 : ${products[i].price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
cardGroup.innerHTML += cardTemplate;
}
}
//가격정렬
const sortPrice = document.querySelector('#sortPrice')
sortPrice.addEventListener('click', function(){
products.sort(function(a,b) {
return a.price - b.price;
});
prodDataBinding();
});//가나다순
const sortText = document.querySelector('#sortText');
sortText.addEventListener('click', function(){
const newSortText = products.sort(function(a,b) {
return a.title > b.title;
});
prodDataBinding(newSortText);
});//6만원이하
const filterPrice = document.querySelector('#filterPrice');
filterPrice.addEventListener('click', function(){
const newFilterPrice = products.filter(function(a) {
return a.price <= 60000;
});
prodDataBinding(newFilterPrice);
});</script>
근데 선생님이 말씀해주신 대로,
products.sort(function(a,b) > [...products].sort(function(a,b);
products.filter(function(a) > [...products].filter(function(a);
이게 rest 였나.. spread 였던 것 같은데 이런 식으로 바꿀 경우
클릭시 카드레이아웃이 동적으로 정렬 변경 되는 이벤트가 발생하지 않는데 왜그럴까요 ㅠㅠ? 죄송합니다 ㅠㅠ...
-
글쓴이글
- 답변은 로그인 후 가능합니다.