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

【问题标题】：on jquery, how to manually define image src into html <img> tag在 jquery 上，如何手动将图像 src 定义为 html <img> 标签
【发布时间】：2015-01-06 07:46:35
【问题描述】：

我正在尝试创建一个充满缩略图的页面，单击时会弹出另一个 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。

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

为了卡马尔

<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>

【问题讨论】：

你的fiddle根本没有JS，你上面贴的那个JS好像也不适用。

标签： javascript jquery html css image

【解决方案1】：

你可以通过jQueryattr获取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);

【讨论】：

效果很好，我对其进行了编辑，以便它可以检测到对父 div 的点击并将子 img src 存储为 var img = $(this).children(".test_img").attr('src ');
你能帮我回答一下如何显示独特的标题和描述以及我点击的不同缩略图吗？现在我可以显示不同的图像，但它们都具有相同的标题和描述。由于您回答了我的一个问题@kamal，因此我现在将您的答案标记为正确
@Devon 你是如何显示标题和描述的？
我已经删除了那些使我的描述和标题位于图像下方的类，所以不必担心，我只需要知道如何根据动态更改标题 n 描述显示的图像
工作得很好@devon，所以说如果我想展示作品的作者，我可以添加另一个像 author-img="/path.jpg" 这样的属性，然后把它叫出来喜欢这样吗？

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

使用

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

【讨论】：