How to convert multiple passes to image

Question

I have a page that lists a series of news posts, and each post has multiple images where the URL is placed in the span. Then they are converted to images when you hover over the corresponding message header. I did this due to performance issues with so many images per page.

My problem is that when you hover over the message header, each interval within that particular message is then replaced by the image using only the "first" image URL. So, where was: image-1, image-2, image-3 , then it becomes: image-1, image-1, image-1 .

Do I need to go through the gaps one by one to do this?

I used the following javascript:

$('.article-post').hover(function() {
    // Find our span
    var elem = $(this).find('span.image');
    // get our img url
    var src = elem.attr('data-original');
    // Change span to img using the value from data-original
    elem.replaceWith('<img src="' + src + '"/>');
});

And here is my HTML layout:

<article class="article-post">
    <header class="article-header">
        <h1>Title...</h1>
        <div class="image-preview">
            <ul>
                <li>
                    <span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-1.jpg" >
                </li>
                <li>
                    <span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-2.jpg" >
                </li>
                <li>
                    <span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-3.jpg" >
                </li>
            </ul>
        </div>
    </header>
    ...
</article>

Answer 1

You need to use .each()to iterate through all the elements span.imageand perform the required operation.

$('.article-post').hover(function() {

    // Find all span iterate and replace with image
    $(this).find('span.image').each(function(){
        var elem = $(this);

        // get our img url
        var src = elem.attr('data-original');

        // Change span to img using the value from data-original
        elem.replaceWith('<img src="' + src + '"/>');
    })
});

$('.article-post').hover(function() {

  // Find all span iterate and replace with image
  $(this).find('span.image').each(function() {
    var elem = $(this);

    // get our img url
    var src = elem.attr('data-original');

    // Change span to img using the value from data-original
    elem.replaceWith('<img src="' + src + '"/>');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="article-post">
  <header class="article-header">
    <h1>Title...</h1>
    <div class="image-preview">
      <ul>
        <li>
          <span class="image" data-original="https://i.stack.imgur.com/lJ0Rx.jpg?s=32&g=1"></span>
        </li>
        <li>
          <span class="image" data-original="https://i.stack.imgur.com/xOwgU.png?s=32&g=1"></span>
        </li>
      </ul>
    </div>
  </header>
</article>

Run codeHide result