Question

我正在尝试创建一个填充缩略图的页面，点击后，另一个div Full（以全屏显示缩略图）将弹出，我将检索缩略图img的src并传入Full div显示单击的图像。

这就是我到目前为止所做的事，小提琴：http://jsfiddle.net/mwhLoyy8/1/

<div class="img_section"> 
    <img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>    
<div class="img_section"> 
    <img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>

现在我正在检测test_img点击，并使用

从js中检索

img = $('<img />', {src    : this.src,
            'class': 'full_image_pic'
        });

this.src工作正常，但我想改为检测img_section而不是test_img，但我不知道如何检索src，我试过this.test_img.src但它不起作用。

我想直接检测div而不是img的原因是因为在我的实际工作文件中我将鼠标悬停在缩略图上时覆盖了另一个和

，检测不会对单词起作用，因为我只使它只能进行图像检测，所以我想改为检测父div。

另一件事是，一旦我显示完整的图像，我如何显示唯一的标题＆amp;显示完整图像下的描述？请指导我！谢谢

for Kamal

<div class="popUp">
    <div class="fullPic">
        <img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
    <div class="full_image_desc">
         <h3 class="desc">Title</h3>
         <p class="desc">My desc</p>
    </div>
</div>

Answer 1

您可以使用jQuery attr

获取src

img = $(".test_img").attr('src');

并通过

更改src

$(".full_image_pic").attr('src', img);

请同时查看此exmaple。

要动态更改标题和说明，您可以在原始图像中添加属性;

<div class="img_section"> 
    <img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>

使用attr更改信息。

title = $(".test_img").attr('img-title');

并使用.html更改标题/说明的内容

$(".full_image_pic .desc").html(title);

Answer 2

您可以使用类或ID来选择图像并更改图像src

$(".image class or #ID").attr("src", "file name");

$(".photo").attr("src", "photo.jpg");

$("#logo").attr("src", "new-logo.jpg");

Answer 3

使用

$(".test_img").attr("src","abc.jpg");

在jquery上，如何手动将图像src定义为html <img/>标记

3 个答案: