-
숙제는 다 했구요. 가격순 정렬, 가나다순 정렬, XX원 이하 보기, 원래대로보기도 잘 필터링 됩니다.
근데 필터링 되고나서 카드 크기가 제멋데로 바뀌더라구요.
Bootstrap 컬럼 클래스 이용해서 크기를 고정해 놨더니 이미지에 padding이 들어가요^^;;;
padding 어떻게 없애죠?
그리고 bootstrap 클래스 쓰는 것 보다 카드 크기 고정하는 더 좋은 방법 있으면 알려주세요~~
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!-- main.css -->
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="card-group container">
</div><div class="container my-4">
<button class="btn btn-danger sort-price">가격순 정렬</button>
<button class="btn btn-primary sort-title">가나다순 정렬</button>
<input id=filterInput>
<button class="btn btn-primary filter">이하 보기</button>
<button class="btn btn-warning original">원래대로</button>
</div>
<script>
var products = [
{ id : 0, price : 71000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
]//products 에 있는 0번째 자료의 price를 class card-body의 p 태그에 넣는다.
//products 에 있는 0번째 자료의 title을 class card-body의 p 태그에 넣는다.
products.forEach(function(i, index) {
var 템플릿 = `<div class="card col-6 col-md-4">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${i.title}</h5>
<p class="price">가격 : ${i.price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
$('.card-group').append(템플릿);
});$('.original').click(function(){
$('.card-group').html('');
products.forEach(function(i, index) {
var 템플릿 = `<div class="card col-6 col-md-4">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${i.title}</h5>
<p class="price">가격 : ${i.price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
$('.card-group').append(템플릿);
});
});//--- 정렬 ---//
var array1 = [2,3,5,6,60,40];
var array = ['라', '나', '가', '다'];
array1.sort(); // 결과: [2, 3, 40, 5, 6, 60] => 문자 정렬 해주는 함수//숫자 정렬은 코딩 해줘야 함
array.sort(function(a,b){
//return a-b; //오름차순
//return b-a; //내림차순
if( a < b ){return -1;}//글자 내림차순
else {return 1;}
});$('.sort-price').click(function(){
var newProducts = [... products]; // array 복사본 만들 때 spread operator 이용
newProducts.sort(function(a, b){ //정렬
return a.price - b.price;
});
newProducts.forEach(function(i, index) {
$('.price').eq(index).html('가격: '+ i.price);
$('.title').eq(index).html(i.title);
})
})$('.sort-title').click(function(){
var newProducts = [... products];
newProducts.sort(function(a, b){ //정렬
if( a.title < b.title ){return -1;}//글자 내림차순
else {return 1;}
});
newProducts.forEach(function(i, index) {
$('.price').eq(index).html('가격: '+ i.price);
$('.title').eq(index).html(i.title);
})
})//--- 필터 ---//
var array = [2,3,5,6,60,40];
var newArray = array.filter(function(a){ // filter()는 기존 array 를 변형 시키지 않으므로 (sort는 변형시키므로 안해도 됨)
return a < 4;
})
//5만원이하보기 버튼을 누르면
//가격을 필터함$('.filter').click(function(){
var filterInput = $('#filterInput').val();if(!filterInput) {
alert('값을 입력하시오');
} else {
var newProducts = products.filter(function(a){
return a.price <= filterInput;
})
console.log(newProducts);$('.card-group').html('');
newProducts.forEach(function(i, index) {
var 템플릿 = `<div class="card col-6 col-md-4">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5 class="title">${i.title}</h5>
<p class="price">가격 : ${i.price}</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`;
$('.card-group').append(템플릿);
})
}
})//--- 맵함수 ---//
// 어레이 안의 데이터에다가 하나하나 똑같은 작업을 하고 싶을 때
// 한 어레이에 전부다 2를 곱해서 새 어레이 만듦
var array = [2,3,5,6,60,40];
var newArray = array.map(function(a){ // filter()는 기존 array 를 변형 시키지 않으므로 (sort는 변형시키므로 안해도 됨)
return a * 2;
})</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>네네 그것도 이미 해봤었어요ㅠㅜ 맨 첨에 상위 div인 <div class="card-group container>에 col-6 col-md-4 줬는데도 크기가 아래처럼 맘대로 변해서 card 클래스에 col을 주니 padding 이 들어가지만 크기가 안변해서 쓴거에요ㅠ
<div class="card-group container col-6 col-md-4">
</div>
말씀해 주신대로 위에 처럼 고치면 아래처럼 되요.
- 답변은 로그인 후 가능합니다.