-
Javascript Data 속성 활용 예시DEV/javascript 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')); }); })결과
[조회] 버튼 누르기 전 화면 
[조회] 버튼 클릭 후 화면 'DEV > javascript' 카테고리의 다른 글
Javascript Toast grid 예시 (1) 2022.02.16 Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자) (0) 2022.02.15 jQuery 선택자(태그) 접근 방법 2 (여러 Id, Class 사용하여 접근하기) (0) 2022.02.15 Javascript DATA 속성 (0) 2022.02.12 jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법) (0) 2022.02.11