javascript – 如何将多个跨度转换为图像

2023年5月28日 157次阅读

我有一个列出一系列新闻帖子的页面,每个帖子都有一些图片,其中URL被放入span中.当您将鼠标悬停在相关的帖子标题上时,它们会转换为图像.由于页面上有如此多图像的性能问题,我已经这样做了.

我的问题是,当你将鼠标悬停在帖子标题上时,该特定帖子中的每个范围将被替换为仅使用“第一个”图像网址的图像.那么它是：image-1,image-2,image-3,然后它变成：image-1,image-1,image-1.

我是否需要逐个遍历跨度才能执行此操作？

我使用了以下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 + '"/>');
});

这是我的HTML布局：

<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>

最佳答案 您需要使用.each()迭代所有span.image元素并执行所需的操作.

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

    // Find all span's 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's 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>
点赞