0

我想在容器 div 内插入一个特殊元素,以存储有关位于容器内的图像的一些信息。我知道我可以将数据存储在容器 div 数据属性本身或图像中,但我发现稍后返回项目将它们放入自己的 DOM 元素时更容易和更清晰。数据属性主要用于 UI 用户操作,例如在将缩略图拖入可放置句柄时使用 jquery 更新元素。

例子:

<div class="container">
   <img class="thumbnail" src="/path/to/thumbnail" />
   <div data-imagefull="path/to/fullsize/image" data-imageid="179"></div>
</div>

在该示例中,我想替换包含数据属性的 div。使用符合 ie7 到 html5 的不同标签。

更新:让我改写一下。我喜欢,并将继续使用数据属性。我想替换的只是“div”标签。必须有比 div 更好的标签,因为 div 是用来显示的,而我没有显示任何东西。只是存储信息。

4

5 回答 5

3

不要为此使用元素。元素用于显示信息,而不是存储信息。

您描述的用例正是属性的设计目的,data因此它们应该放置在img它们相关的元素上。

于 2013-01-31T12:32:52.020 回答
2

您可以在标签上使用hidden属性:div

<div class="container">
   <img class="thumbnail" src="/path/to/thumbnail" />
   <div data-imagefull="path/to/fullsize/image" data-imageid="179" hidden></div>
</div>

规范中所述:

用户代理不应渲染具有指定隐藏属性的元素。

hidden属性是 HTML5 的特性,所以为了支持旧浏览器,你还需要这个 CSS:

*[hidden] {
   display:none;
} 
于 2013-01-31T12:36:48.017 回答
0

您可能应该像这样使用它:

<img id="geoff" data-geoff="geoff de geoff" src="image.jpg" />

使用 JS 获取它:

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

您可以向标签添加任意数量的数据属性。

这也适用于 ie6 和 ie7。

于 2013-01-31T12:40:47.213 回答
0

有几种方法可以做到这一点:

  • hidden使用具有属性的每条数据自己的 DOM 元素(任何你喜欢的)或style="display: none;"
  • 使用一些带有 JSON 数据的 DOM 元素,例如<span style="display: none;">{"id": 1, "name":"John"}</span>

如果你问我,我建议使用data-属性或<input type="hidden" value="somevalue" />. 但是最后一个变体(输入)应该存在于表单中。

我认为您还可以发明更多存储数据的方法。但是你真的需要重新发明轮子吗?


于 2013-01-31T13:11:46.090 回答
0

只需将 data-* 标签放在 img 中,有什么麻烦?很多响应式图片插件实际上都使用了类似的东西

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />
于 2013-01-31T13:55:50.717 回答