728x90
준비물
- 버튼 누르면
- products 안에 있는 자료들을 다나가순 정렬하고
- 카드들 싹 지웠다가 products 순으로 다시 만들기
HTML
<!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"
/>
<link rel="stylesheet" href="main.css" />
<title>Hello, world!</title>
</head>
<body>
<!-- -- 14) 정렬 -->
<div class="container">
<div class="row"></div>
<button class="btn btn-danger" id="more">더보기</button>
<button class="btn btn-danger" id="price">가격순 정렬</button>
<button class="btn btn-danger" id="sort1">다나가순 정렬</button>
</div>
<!-- 스크립트 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<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="list.js"></script>
</body>
</html>#sort1 생성
가나다 순 정렬 방법
// 14-1) 가나다 순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort();
// $("#sort1").click(function () {});
console.log(어레이);변수(어레이) 에 .sort() 사용하면 됨.
콘솔에 출력
다나가 순 정렬 방법
// 14-1) 다나가순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort(function (a, b) {});
$("#sort1").click(function () {});
console.log(어레이);.sort1 버튼에 클릭이벤트리스너 연결
a, b 는?
- array 안에 있는 하나하나의 데이터
- array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄
가 = a , 다 = b 로 가정하면
b가 더 큰 경우, ( 가 = a , 다 = b )
즉 b가 더 뒤에 오는 경우 ( "다" 가 더 뒤에 옴 )
양수를 return.
(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야 다나가순 정렬이 됩니다.
(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
a < b 일 경우 return 우측에 양수
a > b 일 경우 return 우측에 음수
// 14-1) 다나가순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort(function (a, b) {
if (a > b) {
return -1; // a가 b보다 크면 a를 더 앞으로 배치
}
if (a < b) {
return 1; // a가 b보다 작으면 b를 더 앞으로 배치
}
return 0; // 같으면 변경하지 않음});
});
console.log(어레이);만약 글자 두 개가 완전 같을 경우,
return 0 = 조작 필요 없음
버튼누르면 다나가순 정렬
// 14-1) 버튼 누르면 다나가순
$("#sort1").click(function () {
products.sort(function (a, b) {
if (a < b) {
return 1;
} else {
return -1;
}
});
});아까 참고해서 코드짜기.
a 하고 b 의 의미
= products 안에 있던 하나하나의 object (데이터)
= 중괄호 들
제목을 비교하는 경우
$("#sort1").click(function () {
products.sort(function (a, b) {
if (a.title < b.title) {
return 1;
} else {
return -1;
}
});
console.log(products);
});.title 붙여준다.
중괄호 끼리 비교할 수 없으므로.
// 14-1) 버튼 누르면 다나가순
$("#sort1").click(function () {
products.sort(function (a, b) {
if (a.title < b.title) {
return 1;
} else {
return -1;
}
});
$(".row").html("");
products.forEach((a, i) => {
var 템플릿 = `
<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(템플릿);
});
// console.log(products);
});기존 html 지우고 = $(".row").html("");
새로 html 까지 생성해주면 된다.
728x90
'> 메모 > JS' 카테고리의 다른 글
| [JS] 헷갈리는 querySelectAll과 Jqeury 포함 범위 (1) | 2024.04.27 |
|---|---|
| sort, map, filter 함수 (1) (0) | 2024.04.08 |
| [JS] Ajax 정리 (3) (0) | 2024.04.07 |
| [JS] arrow function 문법 (화살표 함수) (0) | 2024.04.07 |
| [JS] Ajax 정리 (2) (1) | 2024.04.05 |
