Question

我的下一个代码包含一些缩略图：

<div class="gallery-wrap">
    <div class="gallery galleryid-45" id="gallery-1">
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/ring-wedding.jpg"><img height="66" width="67" class="attachment-thumbnail" src="ring-wedding-67x66.jpg"></a> </dt>
        </dl>
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-rings.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-rings-67x66.jpg"></a> </dt>
        </dl>
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-ring-test-31.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-ring-test-31-67x66.jpg"></a> </dt>
        </dl>
        <br style="clear: both">
    </div>
</div>
<div id="imageBox">&nbsp;</div>

这是一个由wordpress生成的图库，内置图库功能，由我自定义。

我希望每当我点击缩略图时，图像就会在#imageBox中更改。我想测试两种情况，

当页面加载并且#imageBox为空时，
当页面加载并且#imageBox已根据第一个缩略图包含第一个图像时：）

我知道有一个解决方案（Click on a thumbnail, an image in a div changes），但不适用于我，我认为这是因为HTML标记结构不同。

有没有人知道如何开始/解决这个问题？

Answer 1

$(".gallery-item a").click(function (evt) {
  evt.preventDefault();
  $("#imageBox").empty().append( 
    $("<img>", {src: this.href})
  );
});

看到它正常工作：http://jsfiddle.net/kq9bp/1/

点击图片缩略图，图片将被加载到一个大尺寸的容器div中

1 个答案: