HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>어느 버튼이 클릭되었는지 확인하기2 (bind, forEach)</title>
<!--
웹페이지에 버튼이 여러개 있고 각각의 버튼은 서로 다른일을 한다.
버튼에 대한 이벤트를 올바르게 처리하려면 어떤 버튼을 클릭했는지 알아야 한다.
반복을 나타내어주는 forEach 메소드를 사용해본다.
-->
<link rel="stylesheet" href="css/02.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/02.js"></script>
</head>
<body>
<div id="firstDiv">
<span class="buttons man">남자친구</span>
<span class="buttons woman">여자친구</span>
<span class="buttons clear">지우기</span>
</div>
<div id="result"></div>
</body>
</html>JS
$(document).ready(function(){
const man = "서강준,공유,윤두준,손석구,장기용,강동원";
const woman = "아이유,카리나,김다미,박보영,이나영,윈터";
// 남자친구
$("span.man").bind('click',function(){
$("div#result").html(func_friend(man));
})
// 여자친구
$("span.woman").bind('click',function(){
$("div#result").html(func_friend(woman));
})
// 지우기
$("span.clear").bind('click',function(){
$("div#result").html("");
})
}) // end of $(document).ready(function(){}-----------------
function func_friend(names){
let html = `<ol>`;
names.split(",").forEach(elmt => {
html += `<li>${elmt}</li>`;
})
html += `</ol>`;
return html;
} // end of function func_friend(names){}------------------------------CSS
@charset "UTF-8";
div#firstDiv, div#result {
border: solid 0px gray;
width: 80%;
margin: 0 auto;
text-align: center;
}
div#result {
margin-top: 20px;
font-size: 16pt;
width: 15%;
}
div#firstDiv > span.buttons {
display: inline-block;
border: solid 2px orange;
width: 100px;
margin: 20px;
padding: 5px;
background-color: yellow;
color: #ff0000;
font-size: 15pt;
cursor: pointer;
}
div#result > ol {
border: solid 0px gray;
padding-left: 70px;
}
div#result > ol > li {
border: solid 0px red;
line-height: 50px;
text-align: left;
}정리
- jQueryStudy -> 01_eventHandling -> chap02 -> 02_bind_forEach.html, 02.js, 02.css
