在div上需要2个id属性

Question

通常当我有一个div时，我使用id属性来唯一地标识一个元素。

前：

<div id="F123" class="sidebar-item">
    My first item goes here
</div>

现在，我的div元素需要一个双'key'：'slug'属性和'category'属性。

例如：

<div slug="my-first-item" category="techno" class="sidebar-item">
    My first item goes here
</div>

编译器警告我这些属性无效。在div上使用双键的最佳方法是什么？我很确定有各种方法可以继续，但我对最佳方式感到好奇吗？

Answer 1

<div data-slug="my-first-item" data-category="techno" class="sidebar-item">
    My first item goes here
</div>

新HTML data attributes。如果我问的话，为什么认为你需要呢？

Answer 2

HTML5允许您使用data-[info]。

<div data-slug="my-first-item"></div>

https://developer.mozilla.org/en/HTML/Global_attributes

Answer 3

这样做的一种方法是使用类和id。元素可以包含任意数量的类，因此您可以为每个类别创建一个类（没有样式），然后使用id更具体（尽管每个id仍然必须是唯一的，即使是跨类）。 / p>

另一种方法是让每个id都为id="<category>_<slug>"形式，并找到以类别开头的ID以获取类别中的所有元素。

Answer 4

我不知道您要处理日期的内容或方式，但这是我的想法：

<div id="name['slug_value']['category_value']" class="sidebar-item">
    My first item goes here
</div>

转换为：

<div id="name['my-first-item']['techno']" class="sidebar-item">
    My first item goes here
</div>

但是就像第一个回答一样，我很好奇为什么你需要这样做。