DOM 요소에 저장된 데이터를 얻는 방법은 무엇입니까?

Question

다른 DOM 요소의 ID 인 데이터 foo을 저장하는 클래스 bar의 DOM 요소가 있습니다.

<div class="bar" data="foo">...</div> 

이러한 요소 위로 마우스를 가져 가면 데이터 (id)가 가리키는 DOM 요소를 가져 오려고합니다. 나는이 한 :

$(".bar").hover(function(){alert($("#"+$(this).data()));}); 

을하지만 마우스를 가져 가면,이 오류 얻을 :

Uncaught Error: Syntax error, unrecognized expression: #[object Object] 

내가 잘못하고있는 중이 야 무엇을, 어떻게 고칠 수 있을까요?

Answer 1

당신은 요소의 data 속성으로 data() 방법을 혼동하고 있습니다.

data() 메서드는 찾고자하는 문자열이 아닌 요소에 연결된 관련없는 데이터 개체를 반환합니다.

$(".bar").hover(function(){alert($("#"+$(this).attr('data')));}); 

---

-

---

해결 한 특성으로 데이터

당신이 당신의 예에서 찾고있는 값을 얻으려면, 당신은 attr() 방법으로 속성을 조회한다

해결책 2 - 개체로 데이터

이 경우 'data'에서 요소의 데이터 객체의 키에 대한 그냥 임의의 이름이 얼마나

$('.bar').data('data','foo'); 
$(".bar").hover(function(){alert($("#"+$(this).data('data')));}); 

참고 :

수동 요소에 정보를 첨부 할 수있는 data() 방법을 사용. 데이터를 객체로하고 HTML5는

내가 원래 의도는 HTML5의 데이터 속성과 data 속성을 조회 할 수 있었다 생각 속성, 즉 - data() 방법에 대한 자세한 내용은 the jQuery manual

---

솔루션 3 참조 the jQuery documentation에 따라 automatically pulled in to jQuery's data object이어야합니다.

그러나 HTML5 specification에 따르면 HTML5 데이터 속성은 data-이라는 접두사가 있어야합니다. 따라서 예제가 작동하도록하려면 속성의 이름은 data이 아니라 data-something으로 지정하십시오.예를 들어 :

당신이 다음 jQuery의 data() 방법으로 액세스 할 수 있습니다

<div class="bar" data-something="foo">...</div> 

: jQuery를 자동으로 data- 접두사를 제거하기 때문에 data-something가 data('someting')로 액세스하는 방법을

$(".bar").hover(function(){alert($("#"+$(this).data('something')));}); 

참고.

Answer 2

attr 함수를 사용하여 속성에 액세스해야합니다.

$(".bar").hover(function() { 
    alert($("#"+$(this).attr('data'))); 
    });