我在全尺寸图片旁边有四到五张缩略图。当我点击缩略图时,我只想让它替换全尺寸图像。
缩略图:
<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"));
});
});
这不起作用......有什么帮助吗?
答案 0 :(得分: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
答案 1 :(得分:1)
您的代码确实有效。我已将它放入JSFiddle并且它可以工作,只需查看here on JSFiddle。
您确定包含了JQuery库吗?
答案 2 :(得分:0)
看起来很正确。你有没有尝试提醒正在发生的事情?即在e.preventDefault上方放置“alert('here')”。同时提醒点击的href。如果这两个都是正确的,请尝试将完整的图像选择器更改为'#folio-detail img'。
您是否还可以查看不断变化的源代码(即Firebug / Developer工具)以查看是否有任何变化?