jquery - 使用 title attr 存储文本

Question

我有一个无序列表中的项目列表。每个<LI>项目都有相应的描述，需要在选择该元素时显示。我正在考虑将描述放入标题属性，然后从元素单击中获取它并在描述容器中呈现。但是，我真的不希望它在鼠标悬停时显示为工具提示<li>。有没有更好的替代标题？

<li title="description here">My element</li>

Answer 1

把它存放在一个HTML5 data-* attribute

<li data-title="description here">My element</li>

这样做不会将描述显示为工具提示..

data-title可以是任何数据——你的名字

这可以使用.attr()或.data()

$('li').attr('data-title') ; 

或者

$('li').data('title');

Answer 2

您可以使用包含描述的DL列表，DD并在启用 JS 时默认隐藏并在禁用 JS 时显示。

<dl>
    <dt>My element</dt>
    <dd>Description here</dd>

    <dt>Another element</dt>
    <dd>Another description</dd>
</dl>

Answer 3

您可以拥有任意数量的标签属性。随意定义自己的属性，而不会弄乱预定义的属性。

例如：

<li desc1="description here" desc2="Second desc here">My element</li>

作为普通属性访问它：

$('li').attr('desc1')

$('li').attr('desc2')

在你的情况下，它应该是这样的：

$('li').bind('click', function(event) {
  var desc = $(event.target).attr('desc1');
});

“标准”属性应用于其主要目的。如果开发者需要自己的属性，他应该自由定义它们。

还有一件事：您甚至可以将 HTML 放入属性中，只是不要忘记转义换行分隔符 (", ')。 desc1="<div class='alert'>description here</div>" 会正常工作。