jquery - 为什么 jquery prop() 方法无法获取元素的 value 属性

Question

我li在页面中有几个元素：

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

我想在鼠标悬停时获取 value 属性：

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

但结果总是0，然后我尝试了该attr()方法，它仍然无法工作，我该如何解决这个问题？

Answer 1

li元素没有value属性。

要针对元素存储您自己的元数据，您应该使用 HTML5data-*属性：

<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"));                             
    });
});​

试试这个小提琴

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