DEV/javascript
Javascript Data 속성 활용 예시
석봉
2022. 2. 12. 23:08
Data 속성을 활용하는 방법은 아주 다양하다.
허접하지만 쓰는 방법의 간단한 예시를 작성해보았다.
HTML 샘플
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery.js"></script>
</head>
<body>
<div id="bottonArea">
<button id="searchBtn">
조회
</button>
</div>
<div id="searchArea">
<div data-crawling="name"></div>
<div data-crawling="age"></div>
<div data-crawling="region"></div>
<div data-crawling="state"></div>
</div>
</body>
<script src="./test.js"></script>
</html>
Javascript 예시
"use strict"
const test = {
getElData : new function(){},
};
test.getElData = (el) => {
console.log("start");
// 어디선가 데이터를 가지고 왔다고 가정 (수신한 데이터).
const apiObj = {
"name" : "석봉",
"age" : "29",
"region" : "경기도",
"state" : "바보"
}
$(el).find('div', 'a').each(function(i, el){
// data 속성 이름
const dataName = $(el).attr('data-crawling');
console.log("el : ", el);
// data 속성이 있는 경우
if(dataName ? true : false){
$(el).text(apiObj[dataName]);
}
});
}
$(function(){
// 실행 버튼
$(document).on('click', '#searchBtn', function(){
test.getElData($('#searchArea'));
});
})
결과
