爲什麼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());        
    }) 
});