<!DOCTYPE html>
<html>
<head>
<title>홀짝</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
<style>
* {
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;
}
</style>
<body>
<div class="container">
<div class="card selected">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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$('#even-btn').click(function(){ //even버튼을 누르면 실행되도록 할거다
$('.card').removeClass('selected')//먼저 .card에 선택된 select를 지우고 시작하자
$('.card').each(function(){//
var num = $(this).text()
num = num%2//2로 나누었을때
if(num==0){//나머지가 0이라면 (짝수)
$(this).addClass('selected');//select가 선택되게 하자
}
})
})
$('#odd-btn').click(function(){
$('.card').removeClass('selected')
$('.card').each(function(){
var num = $(this).text()
num = num%2//2로 나누었을때
if(num==1){//나머지가 1이라면 (홀수라면)
$(this).addClass('selected');
}
})
});
});
</script>
</body>
</html>