일부 HTML 태그에 대한 임의 데이터 저장 방법
javascript에서 제공하는 인터랙션이 있는 페이지를 만들고 있습니다.예를 들어 AJAX 요청을 전송하여 기사 내용을 가져온 다음 해당 데이터를 div에 표시하는 링크입니다.이 예에서는 추가 정보(기사 ID)를 저장하기 위해 각 링크가 필요합니다.만약의 경우를 대비해 이 정보를 href 링크에 저장했습니다.
<a class="article" href="#5">
그런 다음 jQuery를 사용하여 a.article 요소를 찾고 적절한 이벤트 핸들러를 첨부합니다.(사용성이나 의미론에 너무 집착하지 마세요.이것은 예에 불과합니다).
어쨌든 이 방법은 효과가 있지만 냄새가 나고 확장이 전혀 안 됩니다(클릭 함수에 파라미터가 여러 개 있는 경우 어떻게 됩니까?이러한 파라미터 중 일부가 옵션인 경우)
즉석에서 분명한 답은 요소에 속성을 사용하는 것이었습니다.그러니까, 그게 목적이지, 안 그래? (어느 정도)
<a articleid="5" href="link/for/non-js-users.html">
최근 질문에서 이 방법이 유효한지 물어봤더니, 내 DTD(Do Do I don't)를 정의하지 못한 것으로 판명되었습니다.그렇지 않으면 유효하지 않거나 신뢰할 수 없습니다.일반적인 응답은 데이터를 데이터 저장소로 보내는 것이었습니다.class(그것은 나의 불충분한 예에 의한 것일지도 모르지만) 하지만, 나에게는 이것이 더 냄새가 난다.네, 기술적으로 타당하지만 좋은 해결책은 아닙니다.
다른 하여 JS의 입니다.<script>그:: 객객객객객관관관관관구구구만만만만만다다.
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
하지만 이것은 유지하기에 정말 골칫거리일 수 있고 일반적으로 매우 지저분하다.
그럼 이 질문을 하기 위해 HTML 태그에 대한 임의의 정보를 어떻게 저장해야 할까요?
어떤 버전의 HTML을 사용하고 있습니까?
<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);
임의 속성은 유효하지 않지만 최신 브라우저에서는 완벽하게 신뢰할 수 있습니다.javascript에서 속성을 설정할 경우 검증에 대한 걱정도 없습니다.
또 다른 방법은 javascript에서 속성을 설정하는 것입니다.jQuery에는 그 목적에 적합한 유틸리티 메서드가 있습니다.또, 독자적인 롤링을 실시할 수도 있습니다.
할 수 은 다음과 같은 입니다.<a class='data\_articleid\_5' href="link/for/non-js-users.html>;
순결주의자들에게는 그다지 우아하지 않지만 보편적으로 지원되고 표준 규격에 준거하며 조작이 매우 쉽습니다.게게정정정최최최최최최것요요요요요요요요 。 당신이 가 if if if ifserialize태그 변경, 복사, 기타 거의 모든 작업을 수행합니다.data속,,,카카카카다다다다다다다다
유일한 문제는 직렬화할 수 없는 개체를 이러한 방식으로 저장할 수 없다는 것입니다. 여기에 매우 큰 개체를 저장하면 한계가 있을 수 있습니다.
두 번째 방법은 다음과 같은 가짜 속성을 사용하는 것입니다.<a articleid='5' href="link/for/non-js-users.html">
이것은 보다 우아하지만, 표준이 아니기 때문에, 서포트에 대해서는 100% 확신할 수 없습니다. 지원하고 는 이 을 지원한다고 합니다. IE6†JS 할 수 있지만 할 수 없습니다.CSS selectors(여기서는 별로 문제가 되지 않습니다), 일부 브라우저는 완전히 혼란스러울 수 있으므로 확인해야 합니다.
연재나 역직렬화 같은 재미있는 일을 하는 것은 훨씬 더 위험할 것이다.
「」를 사용합니다.ids하게 하다JS해시는 태그를 복사하려고 할 때를 제외하고 대부분 작동합니다.「 」가 tag <a href="..." id="link0"> , 「 」를 합니다.JS methods 、 methods 、 methods 、 methods 、 methods 、 methods methods methods methods data하나의 복사본에만 첨부되고 다른 복사본은 수정됩니다.
않아도 tag또는 읽기 전용 데이터를 사용합니다.복사하면tag이 경우 수동으로 처리해야 합니다.
jquery를 사용하여
장처:$('#element_id').data('extra_tag', 'extra_info');
" to to to : " :$('#element_id').data('extra_tag');
현재 jQuery를 사용하고 있는 것은 알고 있습니다만, on-click 핸들러를 인라인으로 정의한 경우는 어떻게 됩니까?다음 작업을 수행할 수 있습니다.
<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 regex)를 할 수 있습니다/articles\/(\d+)/ 반대하여this.href를 참조해 주세요.
jQuery 사용자로서 메타데이터 플러그인을 사용합니다.HTML은 깨끗하고 검증되며 JSON 표기법을 사용하여 기술할 수 있는 모든 것을 포함할 수 있습니다.
좋은 조언입니다.@Prestaul 덕분에
jQuery를 이미 사용하는 경우 jQuery를 사용하여 dom 요소에 임의의 데이터를 저장하는 권장 방법인 "data" 메서드를 활용해야 합니다.
매우 사실이지만, 만약 당신이 평범한 오래된 HTML로 임의 데이터를 저장하길 원한다면? 여기 또 다른 대안이 있습니다.
<input type="hidden" name="whatever" value="foobar"/>
숨겨진 입력 요소의 이름과 값 속성에 데이터를 넣습니다.이것은 서버가 HTML(즉, PHP 스크립트 또는 기타)을 생성하고 있으며, JavaScript 코드가 나중에 이 정보를 사용할 경우 유용할 수 있습니다.
인정하건대, 가장 깨끗한 건 아니지만, 그래도 대안이야.모든 브라우저와 호환되며 유효한 XHTML입니다. 사용자 지정 특성을 사용하지 마십시오. 또한 일부 브라우저에서는 작동하지 않을 수 있으므로 접두사가 'data-'인 속성을 사용하지 마십시오.또한 W3C 검증에 합격하지 않습니다.
나는 "rel" 속성 사용을 지지한다.XHTML이 검증되고 속성 자체가 거의 사용되지 않으며 데이터가 효율적으로 검색됩니다.
그러기 위해서는 다음 4가지 선택지가 있습니다.
- 데이터를 id 속성에 넣습니다.
- 데이터를 임의 속성에 넣습니다.
- 클래스 속성에 데이터 저장
- 다른 태그에 데이터 저장
http://www.shanison.com/?p=321
요소의 할 수 (「Attribute」데이터 프리픽스).<span data-randomname="Data goes here..."></span>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.
실제 작업이 서버 사이트에서 이루어지는 한 출력의 html 태그에 커스텀 정보가 필요한 이유는 무엇입니까?서버에서 알아야 할 것은 사용자 정의 정보가 포함된 모든 종류의 구조 목록에 대한 색인입니다.잘못된 곳에 정보를 저장하려는 것 같습니다.
그러나 대부분의 경우 올바른 솔루션이 올바른 솔루션이 아님을 인식할 수 있습니다.이 경우 추가 정보를 보유하기 위해 javascript를 생성할 것을 강력히 권장합니다.
몇 년 후:
은 약 되었습니다.data-...html 5의 등장으로 속성은 유효한 옵션이 되었습니다.따라서 진실은 바뀌었고 원래 답변은 더 이상 관련이 없습니다.대신 데이터 속성을 사용하는 것이 좋습니다.
<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>
한 가지 가능성이 있습니다.
- 모든 확장/임의 데이터를 저장할 새 div 생성
- 이 div가 보이지 않도록 하기 위해 작업을 수행합니다(예를 들어 CSS와 div의 클래스 속성).
- 확장/임의 데이터를 [X] 안에 넣습니다.이 보이지 않는 div 내의 HTML 태그(테이블의 셀 내 텍스트 또는 기타 원하는 것)
다음 구문을 사용하여 key:value 쌍을 단순 클래스로 저장하는 방법도 있습니다.
<div id="my_div" class="foo:'bar'">...</div>
이는 유효하며 jQuery 실렉터 또는 커스텀메이드 함수를 사용하여 쉽게 검색할 수 있습니다.
html에서는 다음과 같은 속성 이름 앞에 접두사 'data-'를 사용하여 사용자 지정 속성을 저장할 수 있습니다.
<p data-animal='dog'>This animal is a dog.</p>. 매뉴얼 확인
이 속성을 사용하여 다음과 같은 jQuery를 사용하여 속성을 동적으로 설정하고 가져올 수 있습니다.이런 p태그가 붙으면
<p id='animal'>This animal is a dog.</p>
위의 태그에 대해 'breed'라는 속성을 작성하려면 다음과 같이 입력합니다.
$('#animal').attr('data-breed', 'pug');
언제든지 데이터를 검색하려면 다음과 같이 쓸 수 있습니다.
var breedtype = $('#animal').data('breed');
이전 고용주에서는 폼 요소에 대한 정보를 유지하기 위해 항상 커스텀 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은 정상적으로 동작합니다.(사이트의 각 섹션) 모든 "commands"에는 고유한 키워드가 있습니다.그래서 내가 해야 할 일은 더 많은 페이지를 추가하기 위해 위의 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/
메타데이터 플러그인은 임의의 데이터를 html 태그로 저장하는 문제에 대해 jQuery에서 쉽게 검색하여 사용할 수 있는 훌륭한 솔루션임을 알게 되었습니다.
중요:실제 파일 크기는 37kb가 아닌 5kb입니다(다운로드 패키지 전체 크기).
다음은 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"/>
언급URL : https://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags
'programing' 카테고리의 다른 글
| JDBC와 함께 MySQL을 사용한 .sql 스크립트 실행 (0) | 2022.12.13 |
|---|---|
| TabLayout에서 선택한 탭의 아이콘 색상을 변경하려면 어떻게 해야 합니까? (0) | 2022.12.13 |
| 기판과 서브스트링의 차이점은 무엇입니까? (0) | 2022.12.13 |
| PHP: __('Some text')의 역할은 무엇입니까? (0) | 2022.12.13 |
| 최대 연결 끊김 (0) | 2022.12.13 |