JQuery와 소품() 메소드는 요소의 값 속성을 얻을 수없는 이유

Question

나는이 페이지에 li 여러 요소 :

<li value="a">a</li> 
<li value="b">b</li> 
<li value="c">c</li> 
<li value="d">d</li> 

(가) 내가 값 속성을 취득 할 때 거기에 가져가 :

$(function() { 
    $('li').live('mouseover', function() { 
     console.log($(this).prop('value'));        
    }) 
}); 

하지만 결과는 항상 0입니다. attr() 메서드를 시도해도 여전히 작동하지 않습니다. 어떻게이 문제를 해결할 수 있습니까?

Answer 1

li 요소에는 value 속성이 없습니다.

<li data-value="a">a</li> 
<li data-value="b">b</li> 
<li data-value="c">c</li> 
<li data-value="d">d</li> 

는 다음을 검색 할 JQuery와 .data() 방법을 사용하십시오 : 당신은 HTML5 data-* 특성을 사용해야하는 요소에 대해 자신의 메타 데이터를 저장하기위한

$(function() { 
    $('li').live('mouseover', function() { 
     console.log($(this).data('value'));        
    }) 
}); 

Answer 2

흠,이 복제 바이올린에서도 .val을 사용해도 작동하지 않습니다. 아마도 value은 양식 필드 용으로 만 설계되었을 것입니다. 해결책은과 같이, 데이터 속성에 value을 변경하는 것입니다 :

<li data-value="a">a</li> 
<li data-value="b">b</li> 
<li data-value="c">c</li> 
<li data-value="d">d</li>​ 

$(function() { 
    $('li').live('mouseover', function() { 
     alert($(this).data("value"));        
    }); 
});​ 

이 Fiddle

Answer 3

<li> 요소가 value 속성을 가질 수 없습니다보십시오. 고유 한 사용자 정의 속성을 정의하려면이 속성 앞에 data-을 붙입니다.

<li data-value="a">a</li> 
<li data-value="b">b</li> 
<li data-value="c">c</li> 
<li data-value="d">d</li> 

그런 다음 자바 스크립트 코드에서 이름을 변경 :

$(function() { 
    $('li').live('mouseover', function() { 
     console.log($(this).prop('data-value'));        
    }); 
}); 

jQuery를 또한 쉽게 $.data()를 사용하여 data- 속성에 액세스 할 수 있습니다.

 console.log($(this).data('value')); 

Answer 4

대신이이

$(function() 
{ 
    $('li').hover(function() { 
     console.log($(this).attr('value'));        
    }) 
}); 

Answer 5

그것은 검사 작동 할 수 있습니다!

$(function() 
{ 
    $('li').hover(function() { 
     alert($(this).text());        
    }) 
});