显示数组中的特定项目？

Question

Basically I have two column divs sitting besides each other. 基本上我有两个列div并排放置。 One holds thumbnails of my portfolio pieces. 一个保存我的投资组合片段的缩略图。 I want to be able to click on a thumbnail then have specific content show up on the div besides it. 我希望能够单击缩略图，然后在div上显示特定内容。

My theory is that the content can be stored in an array and each thumbnail can have an ID that will correspond to its content's position in the array. 我的理论是，内容可以存储在数组中，每个缩略图可以具有一个ID，该ID与其内容在数组中的位置相对应。 So the first thumbnail image's id will be 0 and so on. 因此，第一个缩略图的ID将为0，依此类推。

But I keep going in circles and have gotten nowhere in coding it. 但是我一直盘旋而已，在编码方面一无所获。 Point me in the right direction with examples? 通过示例为我指明正确的方向？

Here is what I have so far but it is not working at all. 这是我到目前为止的内容，但是根本没有用。 Even with alert boxes with the variables. 即使带有变量的警报框。

  <script type="text/javascript">
  var arr = ["item zero", "item one", "item two", "item three"];

$("div").click(function(){
    var thing = $(this).attr("id");
    $(#description).document.write(arr[thing]);
}
</script>
</head>
<body>

<div class="port" id="15">stuff and things  </div>
<div id="description"> </div>
<script> document.write("hey " + thing);  </script>

</body>
</html>

Answer 1

The simplest way (without usign ID and stuff) would be to put imediately after the image a hidden element with the description of your image. 最简单的方法（没有usign ID和东西）将是在图像后立即放置带有图像描述的隐藏元素。
Than using jQuery take that .next() (to the clicked image) element's text 与使用jQuery相比，使用.next() （到单击的图像）元素的文本
and populate a designated target element: 并填充指定的目标元素：

 $("#portfolio img").click(function(){ $("#js_Description").html( $(this).next().html() ); });

 #portfolio, #js_Description{ display:inline-block; width:204px; height:204px; padding:15px; background:#ccc; vertical-align:top; } #portfolio div{ display:none; /* hide descriptions! */ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="portfolio"> <img src="http://placehold.it/100x100/8f8"> <div>LIGHTGREEN</div> <img src="http://placehold.it/100x100/fa0"> <div>ORANGE! Yumm</div> <img src="http://placehold.it/100x100/ff8"> <div>LEMON</div> <img src="http://placehold.it/100x100/8ff"> <div>That's it...</div> </div> <div id="js_Description"></div>

显示数组中的特定项目？

问题描述

1 个解决方案

解决方案1
0 2015-07-05 00:43:55

显示数组中的特定项目？

问题描述

1 个解决方案

解决方案1 0 2015-07-05 00:43:55

解决方案1
0 2015-07-05 00:43:55