javascript - 替代 li 元素的(不推荐使用的)value 属性

Question

我目前正在开发一个使用 HTML 5、CSS 和 JQuery 的网络应用程序。我有一个用于显示页面链接的无序列表 (ul)，每个 li 元素都包含页面链接。此列表是使用 jQuery 动态创建的。

我想做的是让列表元素只显示链接中的页面名称，但同时保留完整的链接路径。例如，“http://www.foo.com/xyz/contactus”将显示为“contactus”，但 li 元素仍然“知道”完整的链接路径。为此，li 的 value 属性将是完美的，因为我可以这样设置它们:

var ul = $('<ul/>').attr('id', 'linkList');
for (var i = 0; i < linksOnPage.length; i++)  // linksOnPage is an array with all the links
    {
        var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1);

        // Create list element and append content
        var li = $('<li/>').text(pgName);    // Set the text to the page name
        li.attr('value', linksOnPage[i].toString());    // Set the value to the full link

        ul.append(li);
    }

这将创建如下列表:

<ul>
    <li value="http://www.foo.com/xyz/contactus">contactus</li>
    ...
</ul>

不幸的是，自 HTML 4.01 以来，li 的值属性已被弃用(有人知道这背后的基本原理吗？对我来说似乎很有用......)。

所以，我想要一些关于如何进行的建议。一种选择是忽略弃用并无论如何使用 value 属性，因为所有主流浏览器仍然支持它，但我不太热衷于使用已弃用的功能，而且感觉不对。

有什么想法吗？

Answer 1

更改自:

<li value="http://www.foo.com/xyz/contactus">contactus</li>

收件人:

<li data-value="http://www.foo.com/xyz/contactus">contactus</li>

data-* 模式是在 DOM 元素中保存值的新 HTML5 方式。

您可以通过以下两种方式之一获取值:

$('#li-Id').data('value');
$('#li-Id').attr('data-value');

您可以阅读 this blog post of John Resig在这些属性上。

jQuery data function