Question

我在Jquery代码中遇到问题。请帮我解决这个问题。

用于显示图片的HTML代码：

<body>
    <div class="info_image">image1</div>
    <div class="info_image">image2</div>
    <div class="info_image">image3</div>

图片链接为id：

    <div class="reference">
            <p><img id="image1" src="brush-seller.jpg"/></p>
            <p><img id="image2" src="Pest-seller.jpg"/></p>
            <p><img id="image3" src="pick-seller.jpg"/></p>
</body>

现在问题出在JavaScript上。我必须使用 .attr（'src'，value）标记将图像ID用作源并在前3个div中显示该图像。到目前为止，我发现了一个无效的代码：

.attr('src','image/'+info_elem.find('.info_image').html())

请帮我修复这个jquery代码。

Answer 1

使用.each()迭代Div。获取html

并使用.css()设置相应的背景图片

$('.info_image').each(function() {
    var $this = $(this);  
    var imgId = $this.html(); // Assuming the div html contains just the image ID
    var imgSrc = $('#' + imgId).attr('src');

    $this.css('backgroundImage','url('+ imgSrc + ')');
})

最好使用HTML5数据属性来存储图像ID而不是html，因为您可能需要处理空格或其他字符的情况......

<div class="info_image" data-image="image1">Here comes image1</div>
<div class="info_image" data-image="image2">Here comes image2</div>
<div class="info_image" data-image="image3">Here comes image3</div>

<强>的Javascript

  $('.info_image').each(function() {
            var $this = $(this);  
            var imgId = $this.data('image'); 
            var imgSrc = $('#' + imgId).attr('src');

            $this.css('backgroundImage','url('+ imgSrc + ')');
        })

这将更加清洁

如何在jQuery attr（'src'，value）中使用image id作为源？

1 个答案: