为什么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属性。

对于存储自己的元数据对一个元素，你应该使用HTML5 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> 

然后使用jQuery的.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> 

然后在你的JavaScript代码更改名称：

$(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());        
    }) 
});