Question

现在我正在做各种无效的事情，比如：

<span time="50" distance="60"></span>

然后抓住这些信息：

var time = $('span').attr('time');
var distance = $('span').attr('distance');

然后用jS / jQuery中的时间和距离做各种事情。

对我来说，这感觉不对。这是语义上的，但我真的不在乎（实际数据不是时间和距离，而是一些非常无价值和页面特定的东西，没有SE感兴趣的东西）。但还有其他一些原因可以解释为什么这是一个坏主意？

我知道有一个元数据插件以更“官方”的方式做类似的事情，我想到了使用它。但是这个.attr的东西适合我的需要，我没有看到使用该插件的任何令人信服的理由。

所以基本上，这是一个体面的模式，如果没有，为什么不，我应该对元数据插件感兴趣。

感谢。

Answer 1

HTML5支持在向后兼容的属性中嵌入数据。这是一个例子：

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

Useragents可能会将.dataset的想法实现为javascript，这很容易让你单独提取数据位，但现在只需更改类以包含数据就足够了。这将验证为HTML5。

对我而言，这远远好于元数据jquery的想法 - 这对我来说似乎是愚蠢的。

See here for more info.

Answer 2

如果您要使用自定义属性，并且正在使用XHTML，那么将它们命名为“hml”元素并提供相应的“xmlns”定义是个好主意。我这样做的时候我需要添加属性来提供一些上下文信息，到目前为止它工作得很好，特别是使用jQuery。您只需使用.attr('ns:name')。

Answer 3

为什么不使用它：您的网页不会validate on XHTML。

但这取决于你如何看待验证。

Answer 4

您可以使用metadata plugin。然后您的HTML将成为：

<span class="{ time:'50', distance:'60'}"></span>

，你的javascript就是：

var data = $('span').metadata();
var time = data.time;
var distance = data.distance;

这样你的标记就会验证，你可以在服务器端将数据输入你的javascript。

编辑：刚刚注意到你已经提到了元数据插件。对不起，我很兴奋，刚刚发布，没有正确阅读问题。我会在这里留下我的答案，以防万一其他人发现它有用。

Answer 5

混淆来自于jQuery将属性和DOM属性视为同一个事实，而事实并非如此。属性是关于标记的元数据; DOM属性是关于DOM对象的元数据。 jQuery正确地使用DOM属性来操作关于表示标记元素的DOM对象的元数据。它错误地使用术语“属性”来描述它。

jQuery：将attr与自定义属性一起使用

5 个答案: