Question

我目前正在使用HTML 5，CSS和JQuery开发Web应用程序。我有一个无序列表（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

Answer 2

只需使用data属性（intro; longer tutorial; spec）：

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

作为一个优点，jQuery可以通过.data方法方便地检测和公开这些属性的值。

Answer 3

即使value已被弃用，仍可以使用和使用JavaScript进行访问。你只是放弃了验证状态！

或者您可以使用data-*属性（正如我看到其他人建议的那样）或直接将值映射到DOM元素 - 因为您在运行时生成此标记，您只需添加类似属性（JS允许）你这样做既是祝福又是诅咒）：

li.someLinkPath = 'some url here';
//and in the click handler you could access this as
this.someLinkPath;

仍然......如果您打算将其用于导航，为什么不使用带有href的锚？

替换li元素的（已弃用的）value属性

3 个答案: