2012-02-08 2 views
1

jQuery 1.4.3을 사용하고 있습니다.microdata 속성 - data- *를 구현하고 ID 속성을 제거하는 방법은 무엇입니까?

데이터 - * 특성을 사용하기위한 최적의 방법을 결정하려고합니다. 최근 과거,이 같은 체크 박스를 만들었습니다

<input type='checkbox' id='123' class='Product' comp='1' man='1'> 
<input type='checkbox' id='456' class='Product' comp='1' man='2'> 
<input type='checkbox' id='789' class='Product' comp='2' man='3'> 

HTML 5 스펙은 내가 지정 특성을 사용하지 않도록 내가 데이터 - * 속성을 사용한다는 것을 말한다. 어떤 위의 체크 박스가 정말 이렇게 될 것을 의미 달성 할만큼 쉽지만, jQuery를 함께, 나는 보통이 경우에는 실제 제품 ID 될 일이 자신의 아이디, 이러한 요소를 부를 것이다

<input type='checkbox' id='123' class='Product' data-comp='1' data-man='1'> 
<input type='checkbox' id='456' class='Product' data-comp='1' data-man='2'> 
<input type='checkbox' id='789' class='Product' data-comp='2' data-man='3'> 

. 따라서, 이러한 액세스하려면 코드는 다음과 같이 될 것이다 :

$(".Product").click(function() { 
    var ProductID = $(this).attr("id"); 
    alert(ProductID); 
}); 

을 ID 내가 액세스해야 데이터의 단지 조각이 정말이기 때문에 *에 id 대신 속성 데이터 -이어야한다.

<input type='checkbox' class='Product' data-prodid='123' data-comp='1' data-man='1'> 
<input type='checkbox' class='Product' data-prodid='456' data-comp='1' data-man='2'> 
<input type='checkbox' class='Product' data-prodid='789' data-comp='2' data-man='3'> 

이 내가이 작업을 수행 할 수 있기 때문에 ID가 더 이상 필요한 데이터를 저장하기위한 없다는 것을 의미 : 나는 내가 정말 일을해야하는 것은이 생각

$(".Product").click(function() { 
    var ProductID = $(this).attr("data-prodid"); 
    alert(ProductID); 
}); 

를 내가 확인하고 싶은 경우 또는 상자의 특정 그룹을 해제, 나는 이런 식으로 뭔가를 할 수 : 내가 데이터를 저장하기 위해 ID를 사용하지 않고 필요한 모든 작업을 수행 할 수처럼

// WHEN A PRODUCT IS CLICKED 
$(".Product").click(function() { 
    // GET THE COMP 
    var Comp = $(this).attr("data-comp"); 
    // UNCHECK BOXES WITH A DISSIMILAR COMP THAN THE ONE CLICKED 
    $("[data-comp]!="+Comp).attr("checked", false); 
}); 

정말 보인다. 내가 잘못? 마이크로 데이터 저장소를 어떻게 구현해야합니까? CSS 레이아웃을 제외하고 더 이상 id 속성이 필요 없다는 것이 맞습니까? 내가 놓친 게 있니?

+0

조금 혼란 스럽지만 w3c 스펙에 따르면 모든 사용자 정의 속성 앞에는 'data-'라는 접두사가 있어야하며 텍스트 상자 ID, 이름 및 클래스 속성과 같은 입력 요소에는 데이터없이 정상적으로 사용해야합니다. 이러한 속성은 맞춤 속성으로 집계되지 않습니다. 'comp'와 같은 사용자 지정 속성은 'data-'접두사와 함께 사용해야합니다. div 또는 span에는 id 및 class 속성도있을 수 있습니다. 틀 렸으면 고쳐줘! –

답변

1

ID를 사용하는 것은 HTML, CSS 및 Javascript에서 고유 한 의미를 갖습니다. HTML에서

  • ID는이 문서에서 고유해야합니다 의미 독특한 요소를 정의합니다.

  • CSS의 ID는 특정 블록이나 요소에 스타일 규칙을 적용합니다.

  • JS의 ID를 사용하면 document.getElementById를 사용하여 요소를 검색 할 수 있습니다.

데이터 속성을 사용할 때 이러한 의미는 없습니다.

+0

설명해 주셔서 감사합니다! –

1

이것은 합리적으로 들립니다. id은 전체 DOM에서 고유해야합니다. 이러한 값이 실제로 제품 식별자 인 경우 data-prodid을 사용하십시오. 동일한 제품을 나타내는 여러 DOM 요소가있을 수 있습니다. data-prodid 속성을 복제하는 것은 완전히 합법적입니다.

관련 문제