-3

我在 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 代码。

4

1 回答 1

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 + ')');
        })

这会更干净

于 2012-11-12T18:26:27.197 回答