li元素的替代(不推荐)value属性

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

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

var 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 = $('
').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);
    }

这将创建一个列表,如:

  • contactus
  • ...

不幸的是,自从HTML 4.01以来,li的value属性已被弃用(任何人都知道这背后的基本原理?似乎对我很有用......)。

所以,我想就如何继续进行一些建议。一种选择是忽略弃用并使用value属性,因为所有主流浏览器都支持它,但我不太喜欢使用已弃用的功能,但它只是感觉不对。

有任何想法吗?

0
额外
意见: 1
@nnnnn:确切地说
额外 作者 o.v.,
@gdoron:我做过,但你只能这样做一次。强烈的不赞成的感觉是最好的。
额外 作者 o.v.,
@nnnnn:我同意,这实际上并没有发生在我身上。但我想现在我会坚持使用列表,因为我正在考虑使用jQuery UI进行排序。
额外 作者 William,
@nnnnnn:好的,会试试看。
额外 作者 William,
@ o.v。我认为你可以对评论进行upvote,而不是在新评论中写下“同意”......
额外 作者 gdoron,
“我想要做的是让列表元素只显示链接中的页面名称,但同时保留完整的链接路径。” - 这正是锚标签的用途,并且定位标签的优势在于仅适用于没有(或不能)使用鼠标或其他定位设备的键盘用户。像你提到的那样,遵守关于已弃用属性等的标准是很好的,但在我看来,遵循可访问性标准更重要。
额外 作者 nnnnnn,
威廉 - 只需在每个列表项目中添加一个锚点。你仍然可以完成你想要的所有列表排序和样式,但它也可以访问...
额外 作者 nnnnnn,

3 答案

即使 value 已被弃用,它仍然可以在JavaScript中使用和访问。你只是放弃验证状态!

或者,您可以使用 data - * 属性(如我所见其他人所建议的)或将值直接映射到DOM元素 - 因为您在运行时生成此标记,您可以添加像这样的属性JS让你做到这一点既是祝福也是诅咒):

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

仍然...如果你打算使用这个导航,为什么不使用一个href锚?

0
额外

改变自:

  • contactus
  • 
    

    至:

  • contactus
  • 
    

    data-* pattern is the new HTML5 way of keeping values in DOM elements.

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

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

    您可以阅读 John Resig的这篇博文了解这些属性。

    jQuery data function

    0
    额外
    这正是我期待的,谢谢!嗯...似乎我必须等9分钟,直到我可以接受你的答案出于某种原因
    额外 作者 William,
    @威廉。我想我必须等到我看到 $ 15 : - )
    额外 作者 gdoron,

    只需使用 data 属性(简介; < a href =“http://html5doctor.com/html5-custom-data-attributes/”rel =“nofollow”>更长的教程; 规范):

  • contactus
  • 
    

    另外,jQuery通过 .data 方便地检测并公开这些属性的值。/a>方法。

    0
    额外