Question

好的，所以我刚刚学会了如何使用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;

Jquery的：

      $(".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");

    });

Answer 1

本教程使用rel属性，因为它使用的事件处理程序与.galImg绑定，后者是一个具有rel属性的锚元素：

 <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设置为undefined。您应该使用.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＆＃39;画廊＆＃39;交互导致图像链接断开

1 个答案: