JavaScript용 HTML 태그에 임의의 정보를 저장하시겠습니까?

StackOverflow https://stackoverflow.com/questions/1600106

  •  05-07-2019
  •  | 
  •  

문제

매우 일반적인 질문입니다.

HTML/JavaScript를 사용하여 여러 수준의 탭으로 분할되는 양식을 동적으로 생성하고 있습니다.

CSS와 배경 이미지를 사용하여 별표 * 기호로 일부 필드(전역 템플릿과 다른 값을 갖는 필드)를 강조하고 싶습니다.

JS 필드는 각 필드를 반복하고 해당 값을 비교하며 필요한 경우 CSS 클래스를 설정합니다.여태까지는 그런대로 잘됐다.

이제 또한 변경된 모든 필드를 별표로 표시할 뿐만 아니라 탭 그것은에 있습니다.

나는 간단한 것을 좋아하기 때문에 탭의 요소 ID를 각 필드의 HTML 태그("parentTab"과 같은) 어딘가에 속성으로 저장하고 싶습니다.그런 다음 JS 함수는 필드와 해당 "parentTab" 요소(그리고 해당 요소의 "parentTab"도 마찬가지)를 강조 표시합니다.

나의 첫 번째 접근 방식은 "title" 속성이나 parentTab을 저장하기 위한 어떤 것을 오용하는 것입니다.물론, 그것은 더러운 것입니다.그러나 DIV 또는 INPUT 태그에 임의의 속성을 추가하면 더 이상 유효성이 검사되지 않으며 이러한 속성에 액세스하는 것이 안전하지 않다는 느낌이 듭니다. 다른 브라우저가 이를 처리하는 방법을 알고 향후 처리할 것인지 누가 알겠습니까?

그래서 내 질문은 다음과 같습니다JavaScript에 의한 추가 처리를 위해 HTML 태그 내에 임의의 데이터를 저장하는 유효한 표준 준수 방법(일종의 속성)이 있습니까?

물론 "parentTabs" JS 배열을 만들어서 작업을 완료할 수도 있습니다.그러나 입력 자체에 저장하는 것이 훨씬 더 우아할 것입니다.

도움이 되었습니까?

해결책

다음과 같이 기능을 작성하여 필드가 속한 탭 요소를 찾을 수 있습니다. http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

DOM을 사용 하여이 작업을 수행하는 것은 데이터를 일부 사용자 정의 형식으로 복제하는 것보다 항상 "우아함"입니다.

다른 팁

html5의 도입으로 다음을 사용할 수 있습니다. 다음으로 시작하는 속성 data-, 여전히 유효성이 검사됩니다.

<input type="text" name="username" data-parentTab="tab1" value="non-default">

그만큼 rel 속성은 종종 이와 같은 데이터를 저장하기위한 유효한 선택입니다.

jQuery에는이 문제에 대한 데이터 API가 있습니다.http://docs.jquery.com/internals/jquery.data

jQuery를 사용하지 않으면 자신의 태그를 추가하고 그 안에 무엇이든 저장할 수 있습니다. 모두가 이것이 좋지 않다고 말할 것입니다. 그러나 모든 훌륭한 웹 회사는 그렇게하고 있습니다. 그래서 당신은 훌륭한 회사에서 끝날 것입니다 ;-)

나는 방법을 좋아한다 John Resig 이렇게했습니다 : 임의 유형이있는 스크립트 태그. 그의 예는 템플릿에 관한 것이지만, 당신은 실제로 무엇이든 사용할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top