Question

我在全尺寸图片旁边有四到五张缩略图。当我点击缩略图时，我只想让它替换全尺寸图像。

缩略图：

<a href="newimage.jpg" class="enlarge"><img src="thumbnail.jpg" alt="thumbnail" /></a>

原图：

<div id="folio-detail">
<img id="fullImage" src="image.jpg" />
</div>

jQuery的：

$(function(){
        $("a.enlarge").live('click', function (e) {
            e.preventDefault();
            $("img#fullImage").attr("src", $(this).attr("href"));
         });
    });

这不起作用......有什么帮助吗？

Answer 1

需要在代码之前引用jQuery，以便定义jQuery（$）函数。我也略微改变了你的代码（这是有效的），但希望改变使它更清晰

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(function() {
    $("a.enlarge").live('click', function (e) {
       e.preventDefault();
       var href = this.href;
       $("#fullImage").attr("src", href);
    });
});
</script>

<强> An example

Answer 2

您的代码确实有效。我已将它放入JSFiddle并且它可以工作，只需查看here on JSFiddle。

您确定包含了JQuery库吗？

Answer 3

看起来很正确。你有没有尝试提醒正在发生的事情？即在e.preventDefault上方放置“alert（'here'）”。同时提醒点击的href。如果这两个都是正确的，请尝试将完整的图像选择器更改为'＃folio-detail img'。

您是否还可以查看不断变化的源代码（即Firebug / Developer工具）以查看是否有任何变化？

jQuery基于href更改img src

3 个答案: