HTML5에 여러 개의 data- {name} 속성을 가질 수 있습니까?

Question

이 요소에서 3 개의 데이터 값을 모두 가져 오는 방법이 있습니까?

이것은 내가 시작하는 프로젝트에 정말 유용 할 것입니다. 이것으로 필요한 js 모듈을로드하고 DOM에 연결할 수 있습니다. 이상하게 들릴지도 모르지만 나는 여기서 새로운 것을 시도하고 있습니다.

Answer 1

무언가로 분리 한 다음 모두 나누어서 배열에 넣을 수 있습니다.

// oops here's plain JS 
var arrayData = document.getElementById('viewport').getAttribute('data-requries'); 
var arr = arrayData.split(','); 

for (i = 0; i < arr.length; i++) { 
    console.log(arr[i]); 
} 

http://jsfiddle.net/S7D2D/1/

Answer 2

귀하의 질문에 대한 답변은 HTML이 동일한 속성의 여러 인스턴스를 지원하지 않는다는 것입니다. 이 속성을 가져올 수있는 모든 일반적인 방법은 세 가지 중 하나만 검색합니다.

이 문제를 해결하는 일반적인 방법은 속성의 단일 인스턴스를 사용하고 여러 경로를 값으로 지정하는 것입니다. 경로의 경우 대개 세미콜론으로 구분됩니다.

<div id="viewport" data-requires='js/base/paths;js/base/dialog;js/base/notifier'> 

그리고 코드를 사용하여 다중 값 속성을 배열로 분해하십시오.

var requiredPaths = document.getElementById("viewport").getAttribute("data-requires").split(";"); 

Answer 3

data- 속성 내에 더 복잡한 구조를 사용할 수 있습니다. 대신이의

:

이

<div id="viewport" 
data-requires='["js/base/paths", "js/base/dialog", "js/base/notifier"]'> 
</div> 

증명 (단지 배열이 방식으로 검색하는 : jQuery('#viewport').data('requires')를) jQuery.data()를 사용하여이 : 여기에 있습니다 : 아마 http://jsfiddle.net/3StZs/