Javascript 多列表显示隐藏

我正在寻找一种方法，当选择相关缩略图时，在

div

中显示更大的图像。下面是我试图用jquery、javascript或html5做的一个例子。对于下面这样的布局，什么方法最有效

<div id="show_area">
 show large non-thumb image here
</div>

<!-- selection list -->

<div id="view1">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view2">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view3">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view4">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view5">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view6">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

在此处显示大的非拇指图像
产品:Info
描述：信息
产品:Info
描述：信息
产品:Info
描述：信息
产品:Info
描述：信息
产品:Info
描述：信息
产品:Info
描述：信息

试试这个：

$('img').on('click',function(){
    var old_img = this.src;
    var new_img =old_img.split('_thb').join('')
    $('#show_area').html('<img src="'+new_img+'" />');
});

$（'img'）。在（'click'，function（）上{
var old_img=this.src；
var new\u img=旧的img.split（''thb'）。join（''）
$（'show#u area'）.html（''；
});

举个例子

试试这个：

$('img').on('click',function(){
    var old_img = this.src;
    var new_img =old_img.split('_thb').join('')
    $('#show_area').html('<img src="'+new_img+'" />');
});

$（'img'）。在（'click'，function（）上{
var old_img=this.src；
var new\u img=旧的img.split（''thb'）。join（''）
$（'show#u area'）.html（''；
});

举个例子试试这个

$('a img').click(function() {
    $('#show_area img').hide();
    $('#show_area img').attr('src','https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/fNj-YFu4lgw/s120-c/photo.jpg').stop().fadeIn();
});

获取备用图像

src

小提琴：试试这个

$('a img').click(function() {
    $('#show_area img').hide();
    $('#show_area img').attr('src','https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/fNj-YFu4lgw/s120-c/photo.jpg').stop().fadeIn();
});

获取备用图像

src

---

Fiddle:

您想在div中还是在“弹出”/“对话框窗口”中显示它？@Sergio在列表左侧的div中，您是否计划在单击缩略图时加载较大的图像？或者所有图像都已加载？是否使用与缩略图相同的src或其他URL？@Sergio images同一位置，仅使用image_thb.jpg和image.jpg作为完整图像？是否要在div内或“弹出窗口”中显示它/对话框窗口？@Sergio位于列表左侧的一个div中单击缩略图时，您是否打算加载较大的图像？或者所有的图像都已经加载了吗？你是使用与缩略图相同的src还是另一个URL？@Sergio images相同的位置只是image和image.jpg。你需要在你的页面中加载jQuery来完成这项工作，所以在你的

标记中添加

。是否添加

$（'list img'）

，而不是

$（'img'））

帮助防止任何包装在achor中的图像触发脚本？@acctman，没错。那么它将只是锚定在#列表中。你也需要在你的页面中加载jQuery来实现这一点，所以在你的

标记中添加

。添加

$（'#列表img'）

而不是

$（'img'）

有助于防止任何包装在achor中的图像触发脚本吗？@acctman，没错。那么它将只是锚定在列表中