반응형
홀짝
each 반복문을 사용해서 '짝수', '홀수' 버튼을 완성해주세요.
참고로, .card라는 클래스를 가지고 있는 <div> 태그를 파란색으로 바꿔주려면 .selected라는 클래스를 추가해주면 됩니다. css/styles.css 파일에 정의된 코드를 참고하세요.
/* 선택된 카드 */
.card.selected {
background: #3E50B4; /* 파란색 */
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>홀짝</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="card">13</div>
<div class="card">3</div>
<div class="card">14</div>
<div class="card">7</div>
<div class="card">22</div>
<div class="card">38</div>
<div class="card">17</div>
<div class="card">15</div>
<div class="card">11</div>
<div class="card">10</div>
<div class="card">22</div>
<div class="card">31</div>
<div class="card">32</div>
<div class="card">41</div>
<div class="card">10</div>
<div class="card">85</div>
<div class="card">17</div>
<div class="card">82</div>
<div class="card">70</div>
<div class="card">5</div>
<div class="card">53</div>
<div class="card">7</div>
<div class="card">4</div>
<div class="card">29</div>
<div style="clear: both;"></div>
</div>
<div class="buttons">
<button id="even-btn">짝수</button>
<button id="odd-btn">홀수</button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 960px;
background: #eee;
font-family: 'Noto Sans KR', sans-serif;
}
.container {
width: 840px;
margin: 0 auto;
}
.card {
float:left;
width: 10.5%;
margin: 20px 1%;
padding: 15px 0;
font-size: 28px;
text-align: center;
background: #FAFAFA;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
border-radius: 3px;
}
/* 선택된 카드 */
.card.selected {
background: #3E50B4; /* 파란색 */
color: white;
}
.buttons {
text-align: center;
}
.buttons button {
background: none;
border: none;
margin: 30px 5px;
cursor: pointer;
outline: none;
font-size: 20px;
color: #4285F4;
font-weight: 500;
}
$('#even-btn').on('click', function() {
$('.card').removeClass('selected');
$('.card').each(function() {
if (Number($(this).text()) % 2 === 0) {
$(this).addClass('selected');
}
});
});
$('#odd-btn').on('click', function() {
$('.card').removeClass('selected');
$('.card').each(function() {
if (Number($(this).text()) % 2 === 1) {
$(this).addClass('selected');
}
});
});
본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.23 |
|---|---|
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.23 |
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.21 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |