[javascript] 일부 HTML 태그에 대한 임의의 데이터를 저장하는 방법

자바 스크립트가 제공하는 상호 작용이있는 페이지를 만들고 있습니다. 예를 들어 AJAX 요청을 보내 기사의 내용을 가져온 다음 해당 데이터를 div에 표시하는 링크입니다. 분명히이 예에서, 기사의 ID 인 여분의 정보를 저장하려면 각 링크가 필요합니다. 내가 처리 한 방식은 href 링크에 해당 정보를 넣는 것입니다.

<a class="article" href="#5">

그런 다음 jQuery를 사용하여 a.article 요소를 찾고 적절한 이벤트 핸들러를 연결합니다. (여기서 유용성이나 의미에 매달리지 마십시오. 단지 예일뿐입니다)

어쨌든,이 방법은 효과가 있지만 약간 냄새가 나고 전혀 확장 할 수 없습니다 (클릭 기능에 둘 이상의 매개 변수가있는 경우 어떻게됩니까? 그러한 매개 변수 중 일부가 선택적인 경우 어떻게됩니까?)

즉각적인 대답은 요소에 속성을 사용하는 것이 었습니다. 내 말은, 그것이 그들이 원하는 것입니까? (거의).

<a articleid="5" href="link/for/non-js-users.html">

에서 내 최근 질문 이 방법이 유효하면 내가 물었고, 그 다음에 아니, 유효하거나 신뢰성이 아니다, (나는 안) 내 자신의 DTD를 정의하지의 짧은 밝혀졌습니다. 일반적인 반응은 데이터를 class속성 에 넣는 것이 었지만 (내 잘못 선택한 예일 수도 있지만) 나에게는 더 냄새가납니다. 예, 기술적으로 유효하지만 훌륭한 솔루션은 아닙니다.

내가 과거에 사용했던 또 다른 방법은 실제로 일부 JS를 생성하고 <script>태그 의 페이지에 삽입 하여 객체와 연결할 구조체를 만드는 것입니다.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

그러나 이것은 유지하기 위해 엉덩이에 진짜 고통이 될 수 있으며 일반적으로 매우 지저분합니다.

따라서 질문에 도달하기 위해 HTML 태그에 대한 임의의 정보 조각을 어떻게 저장 합니까?

답변

<div data-internalid="1337"></div>

$('#myElId').data('nameYourData', { foo: 'bar' });

var myData = $('#myElId').data('nameYourData');

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>