php - 如何从数组输出中隐藏/显示 div

Question

我生成了两个数组，一个是一组附有唯一数字类的小图像。然后是更大版本的图像，具有与之关联的相同唯一编号。我已经尝试了目前列出的解决方案(不是 jQuery 的)，但没有一个对我有用。我也在更新我的例子，以更好地代表我想要完成的事情。正在生成的动态 id 可以是小图像的一部分，但可以添加到大图像的整个 div 容器中。

所以:

<img id="thumb_1" src="smallimage1.jpg">
<img id="thumb_2" src="smallimage2.jpg">

和

<div id="big_1" style="display:none">
  <img class="1" src="largeimage1.jpg">
  <p>Stuff</p>
</div>

<div id="big_2" style="display:none">
  <img class="2" src="largeimage2.jpg">\
  <p>Stuff</p>
</div>

关于根据点击哪个关联的小图像 ID 来显示每个大 div 的方法，我能否提出一些建议？当单击另一个拇指时，我需要它然后将非事件 div 的显示切换回无。

我想使用 jQuery，但我认为会有冲突(即使在“noConflict”模式下)，所以我需要找出一个使用普通 javaScript 或 Prototype 的解决方案。有什么建议可以帮助我开始工作吗？

Answer 1

CSS

#bigImages img { display:none; }
#bigImages img.active { display:block; }

HTML

<div id="smallImages">
  <img class="1" src="smallimage1.jpg">
</div>

<div id="bigImages">
  <img class="1" src="smallimage1.jpg">
</div>

JS

Event.observe('smallImages','click',function(event){
  if(event.target.tagName=='IMG'){
    if($$('#bigImages img.active')[0]){
      $$('#bigImages img.active')[0].removeClassName('active'); //so you don't have to iterate through all images and conditionally hide them
    }
    var num = event.target.className;
    $$('#bigImages img.'+num)[0].addClassName('active');
  }
});