Question

必须支持IE6并且必须验证vs XHTML Strict 1.0！

这很难解释......

我正在使用通用类名来启动关联元素的插件功能。我还希望与属性中存储的元素相关联。

<a href="url.com" class="popup" rel="900x900" >My Link</a>

有了这个，jQuery将查找具有'popup'的所有元素并解析弹出窗口维度的rel值，并在每次使用大小为w = 900 h的窗口单击此链接时启动popup（）函数= 900

但我需要更进一步，因为我想有更多的选择......

<a href="url.com" class="popup" rel="900x900_scroll_tool_menu" >My Link</a>

我不确定是否使用rel属性是因为我还想在没有rel =属性的其他元素上使用它。

所以我也在考虑使用类...我想出了这个：

 <a href="url.com" class="popup opt_dim-900x900_scroll_tool_menu" >My Link</a>
 <img src="pic.gif" class="popup opt_dim-150x200_location" >My Link</a>

从这看起来选项可以变得非常长，使用类似乎没问题，但也许有更好的东西..

您认为哪种方式更好？你对此有另一个想法吗？我想将选项存储在某些html属性中。

谢谢！

更新

我不断被提醒，有十几种方法可以在Javascript中做任何事情，就这里的解决方案而言，我后来改变了对html5数据属性的正确答案，现在ie6不是问题，看起来是最好的方法。

最好，因为它使用标准功能，并避免了我试图用类名做的任何hackery。确实类名仍然非常灵活，但该解决方案不是语义，也不遵循将视图与行为分离的最佳实践。

Answer 1

如果你可以使用HTML5，那么使用data- *属性 - 它们就是针对这个问题设计的。

<div data-tool-menu="900x900">

http://ejohn.org/blog/html-5-data-attributes/

Answer 2

为什么不在j参数中嵌入json：

<a href="url.com" class="popup" rel="{w:900,h:900}" >My Link</a>

通过这种方式，您可以拥有任意数量的属性，并且格式标准化且易于访问。

如果需要验证;您可以始终使用xhtml，定义自己的自定义命名空间，然后添加自定义属性。

<a href="url.com" class="popup" custom:options="{w:900,h:900}" >My Link</a>

编辑：感谢评论中的@andras，这里有一个很好的例子： http://www.bennadel.com/blog/1453-Using-jQuery-With-Custom-XHTML-Attributes-And-Namespaces-To-Store-Data.htm

Answer 3

从DOM元素中提取元数据并将其作为对象返回。

您可以支持/使用jQuery metadata plugin。有几个选项可供选择，这是在html中嵌入元数据的好方法。

e.g。以下内容均受插件支持。

<li class="someclass {some: 'data'} anotherclass">...</li>
<li data="{some:'random', json: 'data'}">...</li>
<li class="someclass">
   <script type="application/json">{some:"json",data:true}</script>...
</li>

另请参阅：A Plugin Development Pattern来自learningjquery.com

Answer 4

从技术上讲，rel的可能值列表有限，因此您可以创建一个不会验证的页面。

我一直在为这类事物使用额外的课程。我从来没有超过20个字符，所以我从来没有推过任何长度限制。以这种方式使用类的好处是你可以验证页面，这总是一件好事（tm）。

评论更新：

我倾向于不重载单个类名，而是生成多个每个Do Thing Thing的类。这不仅可以使解析更简单，而且还可以轻松地将behavior与identity从attribute分开。

例如：Django Book平台代码尚未提供（至少不是我可以在任何地方找到的，我看起来很难），所以我为客户重新实现它（是的，它会被释放OS）。 docutils的轻微修改版本会自动将behavior和identity添加到“可评论项目”的标记中，因为它会从reStructuredText转换为HTML。具体细节并不相关，但有许多cg-13-134和cg-15-u-142类型类浮动，这对于眼睛和解析器来说很容易。

Answer 5

您可以在元素中包含元素

如果你给元素id，你可以使用类似的东西：

<a href="/url" id="unique_id" class="popup">My Link
    <script type="text/javascript">
        popup['unique_id'] = { \\JSON object describing options
                             };
    </script>
</a>

当然，你仍然将Javascript与你的HTML交织在一起，但它至少会验证。

Answer 6

我认为你正在寻找jQuery.data()。

jQuery.data（）方法允许我们将任何类型的数据附加到DOM 元素......

从上面链接中的示例：

var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);

Answer 7

为什么不这样做呢？

<a href="url.com" class="popup">
<input type="hidden" value="900x900_scroll_tool_menu">My Link</a>

然后在您的点击事件中使用正确的jQuery选择器。简单，它可以使javascript保持在HTML的这一部分之外。

Answer 8

由于您将使用javascript，我建议您将所需的额外选项/信息作为参数添加到您的网址中。我一直在为你的问题寻找类似的解决方案，我终于决定走这条路。这也是ThickBox（http://jquery.com/demo/thickbox/）的方式，我在几个项目中成功使用它。

<a href="url.com?width=900&height=900&randomKey=randomValue" class="popup">My Link</a>

然后在你的js

$(".popup").click(function(){
  var url = $(this).attr("href");
  var width = fancyFunctionToParseParameters(url, "width");
  ...
});

用于存储jQuery解析信息的最佳HTML属性是什么？

8 个答案: