Question

如何创建一个数组（我认为），其中包含有关图像的附加信息并在缩略图上显示？非常感谢您的帮助！

例如

thumbnail : 'link/x-thumb.jpg'
mainimg : 'link/x.jpg'
description : 'this is an image'
category : 'Abstract'

在x-thumb上单击，我想在某个div中显示信息。另外，如何添加第二个细节区域？有人可以帮我或链接我的教程吗？非常感谢你！

Answer 1

数据必须来自某个地方。它可以存储在javascript对象中，例如如果您的图片有ID，那么您可以将其用作密钥：

var imageData = {
  imageId0: {
    thumbnail : 'link/x-thumb.jpg',
    mainimg : 'link/x.jpg',
    description : 'this is an image',
    category : 'Abstract',

  imageId1: {
    thumbnail : 'link/y-thumb.jpg',
    mainimg : 'link/y.jpg',
    description : 'this is another image',
    category : 'Abstract',

  ...

  };

然后使用侦听器格式化并显示它。但是，最好将它编码到服务器上的HTML元素中，然后使用侦听器来显示它。然后你可以将显示元素的id键入图像的id（例如'image0-data'），你的监听器就可以这么简单：

function showData(el) {
  showElement(el.id + '-data');
}

或类似，其中 showElement 函数获取ID并显示元素（有许多方法 - 转换，修改类，修改显示或可见性属性等）。请记住，无论如何都必须发送数据，因此通过将其作为脚本而不是HTML发送来保存任何内容。您可以节省一些标记，但服务器在生成它时效率更高，如果它是原始文档的一部分，客户端将更快地解析它。

最后，如果你做对了，它会给你一个很好的后备。非脚本化浏览器无论如何都可以显示数据，可编写脚本的浏览器可以隐藏它然后在点击时显示。

如何在点击时显示带有图像细节的数组？

1 个答案: