Question

基本上我有两个列div彼此相邻。一个人拿着我的投资组合的缩略图。我希望能够点击缩略图，然后在div上显示特定内容。

我的理论是内容可以存储在一个数组中，每个缩略图都可以有一个与其内容在数组中的位置相对应的ID。因此，第一个缩略图图像的ID将为0，依此类推。

但是我一直在圈子里，并且在编码方面没有任何进展。用示例指出我正确的方向？

到目前为止，这是我所拥有的，但它根本不起作用。即使有带变量的警报框。

  <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

最简单的方法（没有usign ID和东西）就是在图像之后立即放置一个带有图像描述的隐藏元素。
比使用jQuery获取.next()（对于点击的图像）元素的文本
并填充指定的目标元素：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

从数组中显示特定项目？

1 个答案: