Home/ Questions/Q 8817875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T04:57:29+00:00

I am facing a problem in a Jquery code. Please help me to fix

  • 0

I am facing a problem in a Jquery code. Please help me to fix this problem.

HTML Code for showing images:

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

The image links with 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>

Now the problem is with JavaScript. I have to use .attr(‘src’,value) tag to use the image id as source and show that image in first 3 div. So far I found a code which didn’t work:

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

Please help me to fix this jquery code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use .each() to iterate over the Div’s . Fetch the html

    And use .css() to set the corresponding background image 

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

    Better to use HTML5 data attribute to store the image ID instead of the html as you might need to handle the cases of empty spaces or other characters…

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

    This will be lot cleaner

    • 0