好的,所以我最近刚刚学会了如何使用 jquery 来切换目标 div 的图像源,但是生成的图像加载了一个损坏的链接。有一段时间,我什至不知道如何尝试这样做。事实上,脚本实际上改变了目标 div 的图像源是我所追求的,但我不知道为什么它会返回损坏的图像。缩略图栏中的其中一张图片是来自主要内容 div 的原始图片,但它也显示为损坏的。处理更改的代码来自教程,几乎是逐字逐句的。
我已经快速搜索了这个问题,但我能找到的所有内容似乎都不相关;我没有学过任何 PHP,所以这可能是个问题。
HTML:
<table id="thumb_row">
<td><div class="thumb"><img src="../../../Documents/Blacktip-Reef-Shark.jpg" /></div> </td>
<td><div class="thumb"><img src="../about_clicked.png"/></div></td>
<td><div class="thumb wide_thumb"><img src="../Web_Teaser_Images/Hyp_1.jpg"></div></td>
<div id= "content_bar"><img src="../Web_Teaser_Images/Hyp_1.jpg"/></div>
CSS:
.thumb{ position: relative;
clear:both;
background-color:#747474;
z-index:201;
height: 120px;
width: 120px;
margin: 5px 5px 5px 5px;
opacity: 0;
overflow:hidden;
}
.thumb img{width: auto;
height: 120px;
margin: 0px 0px 0px 0px;
}
.wide_thumb img{width: auto;
height: 120px;
margin: 0px 0px 0px -100px;
}
#thumb_row {clear:both;
margin:665px 0px 0px 0px;
position: absolute;
z-index: 100;
background-color: none;
height: auto;
width: 100%;
float: right;
J查询:
$(".thumb").click(function(){
var image = $(this).attr('rel');
$('#content_bar').fadeOut("fast");
/*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/
$('#content_bar').html('<img src="'+image+'"/>');
$('#content_bar').fadeIn("fast");
});
最佳答案
本教程使用 rel 属性,因为它使用的事件处理程序绑定(bind)到 .galImg,这是一个具有 rel 属性的 anchor 元素:
<a href="#" rel="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" class="galImg"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d_s.jpg" class="thumb" border="0"/></a>
您拥有的具有 .thumb 类的 div 没有 rel 属性,因此它最终将图像 src 设置为未定义。您拥有的 .thumb 单击事件处理程序应该改为查找嵌套图像的 src 属性,如下所示:
$(".thumb").click(function(){
var image = $(this).find('img').attr('src'); // child element src
$('#content_bar').fadeOut("fast");
/*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/
$('#content_bar').html('<img src="'+image+'"/>');
$('#content_bar').fadeIn("fast");
});
关于Jquery 'gallery' 交互导致图像链接损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17256677/