gpt4 book ai didi

javascript - 如何使用 jQuery 选择器,获取图像的 src 并将其设置为另一个元素的背景图像?

转载 作者:太空宇宙 更新时间:2023-11-04 11:53:13 25 4
gpt4 key购买 nike

我正在尝试在以下情况下进行这项工作:

我的目标是从下面的 html 结构中获取第一张图片的 src,然后将其 src 值设置为 DOM 中存在的另一个元素的 background-image:

动态加载的 HTML 输出。

我已经设置了 Instafeed jQuery 插件以某种方式输出以下 html 结构:图像通过 Instagram API 动态加载。

我想从下面的第一张图片中获取图片 src...

<div id="instafeed">
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10375586_312675495555582_308260980_n.jpg">
</a>
</div>

<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/10454019_1429094704028916_1903084125_n.jpg">
</a>
</div>

<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/1530818_682625665122870_298851871_n.jpg">
</a>
</div>
</div>

...并将其作为以下目标元素.bgcover的url:

<div class="masthead bgcover" style="background-image: url('https://distilleryimage11-a.akamaihd.net/fdc05880f98511e2af2c22000a9e510c_7.jpg');"></div>

jQuery

下面的代码有效,但是,它获取了 html 中的其中一个图像的 img src 而不是第一个...

$( window ).load(function() {
// For each image with the class .dynamic-image on the page
$(".dynamic-image").each(function() {
// Grab the image
var image_source = $(this).attr('src');

// Set the background
$(".bgcover").css("background-image",'url('+image_source+')');

});
});

通过阅读 jQuery's :eq() Selector文档,我现在正在尝试学习如何使用选择器,但我是 JS/jQuery 的新手,所以我非常感谢有关使其以正确方式工作的任何提示。

最佳答案

jquery 中的.each() 函数就像一个循环。它将在每场比赛中循环运行。因此,在您上面的代码中,理想情况下它将选择最后一个 img 标签并将其图像设置为背景。

相反,如果您使用 .first() 函数,它将返回它匹配的第一个元素。这是适合您的实现。

$(window).load(function () {
// For each image with the class .dynamic-image on the page

// Grab the image
var image_source = $(".dynamic-image").first().attr('src');
image_source = "url('" + image_source + "')";
// Set the background
$(".bgcover").css("background-image", image_source);

});

希望这对您有所帮助。

关于javascript - 如何使用 jQuery 选择器,获取图像的 src 并将其设置为另一个元素的背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30472725/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com