일부 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 태그에 대한 임의의 정보 조각을 어떻게 저장 합니까?
어떤 버전의 HTML을 사용하고 있습니까?
HTML 5, 가지고 완전히 유효 데이터 -로 시작 속성 정의를 , 예를 들어,
<div data-internalid="1337"></div>
XHTML에서 이것은 실제로 유효하지 않습니다. XHTML 1.1 모드 인 경우 브라우저에서 이에 대해 불평 할 수 있지만 1.0 모드에서는 대부분의 브라우저에서 자동으로 무시합니다.
내가 당신이라면, 스크립트 기반 접근 방식을 따를 것입니다. 서버 측에서 자동으로 생성하여 유지 관리에 어려움을 겪지 않도록 할 수 있습니다.
jQuery를 이미 사용중인 경우 jQuery를 사용하여 dom 요소에 임의의 데이터를 저장하는 데 권장되는 방법 인 "data"방법을 사용해야합니다.
무언가를 저장하려면 :
$('#myElId').data('nameYourData', { foo: 'bar' });
데이터를 검색하려면
var myData = $('#myElId').data('nameYourData');
그게 전부입니다.하지만 자세한 정보 / 예제 는 jQuery 설명서 를 참조하십시오.
또 다른 방법으로, 나는 개인적으로 이것을 사용하지 않지만 작동합니다 (eval ()이 위험하기 때문에 JSON이 유효한지 확인하십시오).
<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);
임의의 속성은 유효하지 않지만 최신 브라우저에서는 완벽하게 신뢰할 수 있습니다. 자바 스크립트를 통해 속성을 설정하는 경우 유효성 검사에 대해 걱정할 필요가 없습니다.
대안은 자바 스크립트에서 속성을 설정하는 것입니다. jQuery에는 그 목적을위한 유용한 유틸리티 메소드가 있거나 직접 롤백 할 수 있습니다.
가능한 모든 브라우저에서 작동하는 해킹은 다음과 같이 공개 클래스를 사용하는 것입니다. <a class='data\_articleid\_5' href="link/for/non-js-users.html>;
이것은 순수 주의자들에게 그다지 우아하지는 않지만 보편적으로 지원되고 표준을 준수하며 조작하기가 매우 쉽습니다. 실제로 가장 좋은 방법처럼 보입니다. 이 경우 serialize, 수정 , 복사 , 태그를, 또는 다른 거의 아무것도 할 data것이다 유지 부착 복사 등
유일한 문제는 직렬화 할 수없는 객체를 그런 식으로 저장할 수 없으며 실제로 거대한 것을 넣으면 한계가있을 수 있다는 것입니다.
두 번째 방법은 다음과 같은 가짜 속성 을 사용하는 것입니다.<a articleid='5' href="link/for/non-js-users.html">
이것은 더 우아하지만 표준을 위반하며 지원에 대해 100 % 확신하지 못합니다. 많은 브라우저가 완전히 지원 JS하지만 IE6는 액세스를 지원 하지만 CSS selectors(여기서는 중요하지 않음) 액세스를 지원한다고 생각합니다 . 아마도 일부 브라우저가 완전히 혼란 스러울 수 있으므로 확인해야합니다.
직렬화 및 역 직렬화와 같은 재미있는 작업을 수행하는 것이 훨씬 더 위험합니다.
태그를 복사하려고 할 때를 제외하고는 ids순수 JS해시를 사용하는 것이 대부분 작동합니다. 이있는 경우 tag <a href="..." id="link0">표준 JS방법을 통해 복사 한 다음 data하나의 사본에 첨부 된 파일을 수정하려고 하면 다른 사본이 수정됩니다.
를 복사하지 않거나 읽기 전용 데이터를 tag사용 하는 경우 문제가되지 않습니다 . 를 복사 하고 수정 한 경우 수동으로 처리해야합니다.tag
jquery를 사용하여
저장 : $('#element_id').data('extra_tag', 'extra_info');
검색 : $('#element_id').data('extra_tag');
현재 jQuery를 사용하고 있지만 onclick 핸들러를 인라인으로 정의하면 어떻게됩니까? 그럼 당신은 할 수 있습니다 :
<a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
Article 5</a>
숨겨진 입력 태그를 사용할 수 있습니다. w3.org에서 유효성 검사 오류가 발생하지 않습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
<title>Hello</title>
</head>
<body>
<div>
<a class="article" href="link/for/non-js-users.html">
<input style="display: none" name="articleid" type="hidden" value="5" />
</a>
</div>
</body>
</html>
jQuery를 사용하면 (테스트되지 않음)과 같은 기사 ID를 얻을 수 있습니다.
$('.article input[name=articleid]').val();
그러나 이것이 옵션이라면 HTML5를 권장합니다.
임의의 데이터를 추가하는 대신 이미 의미있는 데이터를 사용하지 않겠습니까?
즉,를 사용 <a href="/articles/5/page-title" class="article-link">하면 프로그래밍 방식으로 페이지의 모든 기사 링크 (클래스 이름을 통해)와 기사 ID (정규식 /articles\/(\d+)/과 일치 this.href)를 얻을 수 있습니다.
jQuery 사용자는 메타 데이터 플러그인을 사용합니다 . HTML은 깔끔해 보이고 유효성이 검사되며 JSON 표기법을 사용하여 설명 할 수있는 모든 것을 포함 할 수 있습니다.
따라서 그렇게하려면 네 가지 선택이 있어야합니다.
- id 속성에 데이터를 넣습니다.
- 임의의 속성에 데이터를 넣습니다
- 클래스 속성에 데이터를 넣습니다
- 다른 태그에 데이터를 넣으십시오
http://www.shanison.com/?p=321
나는 "rel"속성의 사용을 옹호합니다. XHTML은 유효성을 검사하고 속성 자체는 거의 사용하지 않으며 데이터를 효율적으로 검색합니다.
이것은 좋은 조언입니다. @Prestaul 덕분에
jQuery를 이미 사용중인 경우 jQuery를 사용하여 dom 요소에 임의의 데이터를 저장하는 데 권장되는 방법 인 "data"방법을 사용해야합니다.
매우 사실이지만 임의의 데이터를 일반 HTML로 저장하려면 어떻게해야합니까? 여기 또 다른 대안이 있습니다 ...
<input type="hidden" name="whatever" value="foobar"/>
숨겨진 입력 요소의 이름 및 값 속성에 데이터를 넣습니다. 서버가 HTML (예 : PHP 스크립트 등)을 생성하고 JavaScript 코드가 나중에이 정보를 사용할 경우에 유용 할 수 있습니다.
분명히 가장 깨끗하지는 않지만 대안입니다. 모든 브라우저와 호환되며 유효한 XHTML입니다. 당신은해야 하지 사용자 지정 특성을 사용하거나 당신이 정말로와 속성을 사용한다 '데이터 -'접두사, 모든 브라우저에서 작동하지 않을 수있다. 또한 문서는 W3C 유효성 검사를 통과하지 못합니다.
임의의 요소 ( <span data-randomname="Data goes here..."></span>) 에 대해 직접 만든 속성의 data- 접두사를 사용할 수 있지만 이는 HTML5에서만 유효합니다. 따라서 브라우저는 유효성에 대해 불평 할 수 있습니다.
<span style="display: none;">Data goes here...</span>태그를 사용할 수도 있습니다 . 그러나이 방법으로 속성 함수를 사용할 수 없으며 css와 js가 꺼져 있으면 실제로 깔끔한 해결책이 아닙니다.
그러나 개인적으로 선호하는 것은 다음과 같습니다.
<input type="hidden" title="Your key..." value="Your value..." />
입력은 모든 경우에 숨겨지고 속성은 완전히 유효하며 <form>태그 내에 있으면 이름이 없으므로 전송되지 않습니다. 무엇보다도 속성은 실제로 기억하기 쉽고 코드는 이해하기 쉽고 멋지게 보입니다. ID 속성을 넣을 수도 있으므로 JavaScript로 쉽게 액세스하고 키와 값 쌍에 액세스 할 수 있습니다 input.title; input.value.
한 가지 가능성은 다음과 같습니다.
- 모든 확장 / 임의 데이터를 보유 할 새 div 생성
- 이 div가 보이지 않도록하기 위해 무언가를하십시오 (예 : CSS와 div의 클래스 속성)
- 확장 / 임의 데이터를이 보이지 않는 div 내에 [X] HTML 태그 (예 : 테이블 셀 내의 텍스트 또는 원하는 다른 것)에 넣습니다.
또 다른 방법은 다음 구문을 사용하여 키 : 값 쌍을 간단한 클래스로 저장하는 것입니다.
<div id="my_div" class="foo:'bar'">...</div>
이것은 유효하며 jQuery 선택기 또는 사용자 정의 함수를 사용하여 쉽게 검색 할 수 있습니다.
이전 고용주에서는 양식 요소에 대한 정보를 보유하기 위해 항상 사용자 정의 HTML 태그를 사용했습니다. 캐치 : 우리는 사용자가 IE를 사용해야한다는 것을 알고있었습니다.
당시 FireFox에서는 제대로 작동하지 않았습니다. FireFox가이를 변경했는지 여부는 알 수 없지만 HTML 요소에 고유 한 속성을 추가하면 독자의 브라우저에서 지원되지 않을 수도 있습니다.
독자가 사용하는 브라우저 (예 : 회사의 내부 웹 애플릿)를 제어 할 수 있다면 반드시 시도하십시오. 무엇을 다칠 수 있습니까?
이것은 내가 당신에게 아약스 페이지를하는 방법입니다 ... 매우 쉬운 방법입니다 ...
function ajax_urls() {
var objApps= ['ads','user'];
$("a.ajx").each(function(){
var url = $(this).attr('href');
for ( var i=0;i< objApps.length;i++ ) {
if (url.indexOf("/"+objApps[i]+"/")>-1) {
$(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
}
}
});
}
이것이 작동하는 방법은 기본적으로 클래스 'ajx'가있는 모든 URL을보고 키워드를 대체하고 # 기호를 추가하는 것입니다 ... js가 꺼져 있으면 URL이 정상적으로 작동합니다 ... 모두 " apps "(사이트의 각 섹션)에는 자체 키워드가 있으므로 페이지를 추가하기 위해 위의 js 배열에 추가하기 만하면됩니다 ...
예를 들어 현재 설정은 다음과 같이 설정됩니다.
var objApps= ['ads','user'];
따라서 다음과 같은 URL이 있으면
www.domain.com/ads/3923/bla/dada/bla
js 스크립트는 / ads / 부분을 대체하므로 내 URL은
www.domain.com/ads/#p=3923/bla/dada/bla
그런 다음 jquery bbq 플러그인을 사용하여 페이지를 적절히로드합니다 ...
http://benalman.com/projects/jquery-bbq-plugin/
메타 데이터 플러그인은 jQuery를 사용하여 쉽게 검색하고 사용할 수있는 방식으로 html 태그로 임의의 데이터를 저장하는 문제에 대한 훌륭한 솔루션이라는 것을 알았습니다.
중요 : 당신이 포함 실제 파일이 아니라 (5) 킬로바이트가 아니라 37 (전체 다운로드 패키지의 크기) KB
다음은 Google 애널리틱스 추적 이벤트를 생성 할 때 사용하는 값을 저장하는 데 사용되는 예입니다 (참고 : data.label 및 data.value는 선택적 매개 변수입니다)
$(function () {
$.each($(".ga-event"), function (index, value) {
$(value).click(function () {
var data = $(value).metadata();
if (data.label && data.value) {
_gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
} else if (data.label) {
_gaq.push(['_trackEvent', data.category, data.action, data.label]);
} else {
_gaq.push(['_trackEvent', data.category, data.action]);
}
});
});
});
<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>
html에서 속성 이름 앞에 접두사 'data-'를 사용하여 사용자 정의 속성을 저장할 수 있습니다.
<p data-animal='dog'>This animal is a dog.</p>. 설명서 확인
이 속성을 사용하여 jQuery를 사용하여 속성을 동적으로 설정하고 가져올 수 있습니다.
<p id='animal'>This animal is a dog.</p>
그런 다음 위의 태그에 대해 'breed'라는 속성을 작성하려면 다음과 같이 작성할 수 있습니다.
$('#animal').attr('data-breed', 'pug');
언제든지 데이터를 검색하기 위해 다음과 같이 작성할 수 있습니다.
var breedtype = $('#animal').data('breed');
실제 작업이 서버 측에서 수행되는 한 어쨌든 출력의 html 태그에 사용자 정의 정보가 필요한 이유는 무엇입니까? 서버에서 다시 알아야 할 것은 사용자 정의 정보가있는 모든 종류의 구조 목록에 대한 색인입니다. 정보를 잘못된 곳에 저장하려고 생각합니다.
그러나 불행히도 많은 경우에 올바른 솔루션이 올바른 솔루션이 아니라는 것을 알고 있습니다. 이 경우 추가 정보를 보유 할 자바 스크립트를 생성하는 것이 좋습니다.
오랜 시간이 지난 후:
이 질문은 data-...속성이 html 5의 출현으로 유효한 옵션이 되기 전에 약 3 년 전에 게시 되었으므로 진실이 바뀌었고 원래의 대답은 더 이상 관련이 없습니다. 이제 데이터 속성을 대신 사용 하는 것이 좋습니다 .
<a data-articleId="5" href="link/for/non-js-users.html">
<script>
let anchors = document.getElementsByTagName('a');
for (let anchor of anchors) {
let articleId = anchor.dataset.articleId;
}
</script>
참고 URL : https://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags
'Programing' 카테고리의 다른 글
| O (1 / n) 알고리즘이 있습니까? (0) | 2020.03.05 |
|---|---|
| contenteditable 변경 이벤트 (0) | 2020.03.05 |
| 파이썬 스크립트의 구문을 실행하지 않고 어떻게 확인할 수 있습니까? (0) | 2020.03.05 |
| PHP 함수용 Big-O 목록 (0) | 2020.03.05 |
| 순간 js 날짜 시간 비교 (0) | 2020.03.05 |