更换 使用jQuery的图像元素

Question

我在使用jquery用图像替换字符串（URL）时遇到困难。我希望函数在页面加载时运行并用图像替换文本字符串。我需要它来处理<event-description> <p>http://example.com/pageone.html </p> </event-description>on the page.中包含的许多不同的“字符串”这就是我所拥有的：

jQuery( document ).ready(function( $ ) {

       $('.event-description p').each(function () {

       string = $(this).text('http://example.com/pageone.html');
       $(this).html('<img width="75" src="https://example.com/images/logo-one.jpg" alt="' + string + '" />');

       string = $(this).text('http://example.com/pagetwo.html');
       $(this).html('<img width="75" src="https://example.com/images/logo-two.jpg" alt="' + string + '" />');

    });



});

任何帮助，将不胜感激！

Answer 1

你必须使用condition来比较每个p的文本。

jQuery( document ).ready(function( $ ) {

  $('.event-description p').each(function () {
    
    var string = $(this).text();
    
    if($(this).text() == 'http://example.com/pageone.html'){
      $(this).html('<img width="75" src="https://via.placeholder.com/75x75?text=1" alt="' + string + '" />');
    }

    if($(this).text() == 'http://example.com/pagetwo.html'){
    $(this).html('<img width="75" src="https://via.placeholder.com/75x75?text=2" alt="' + string + '" />');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="event-description">
  <p>http://example.com/pageone.html</p>
  <p>http://example.com/pagetwo.html</p>
</div>

Answer 2

你可以使用.replaceWith( function )

$('.event-description p').replaceWith(function(idx, txt) {
  return $('<img/>', {width: "75", src: txt.trim(), alt: txt.trim()});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="event-description"><p>http://example.com/pageone.html </p></div>
<div class="event-description"><p>http://example.com/pagetwo.html </p></div>

Answer 3

这应该让你去。请记住，因为我在循环中使用相同的图像，所有<p>元素的图像都是相同的。您可以让对象映射指向您需要的确切图像以使其动态化或使用推荐的data属性。

见下文：<p data-imgurl='logo-one'>，data-imgurl是这里的图像（标识）名称

注意：这会在<p>标签内添加图像。如果你想删除<p>使用$（this）.parent（）。html（...）

$(function(){ //shorhand for document.ready function (same as yours)
    $('.event-description p').each(function () {
           var $this = $(this);
       
           //take the current string present in `<p>` tag
           var currentString = $this.text(); 
           //get data attribute to get the image name
           var imgUrl = $this.data('imgurl');
           
           $(this).html('<img width="75" src="https://example.com/images/'+imgUrl+'.jpg" alt="' + currentString + '" />');
           //replace with image tag with alt attribute as previous string
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event-description">
  <p data-imgurl='logo-one'>http://example.com/pageone.html</p>
</div>

<div class="event-description">
  <p data-imgurl='logo-two'>http://example.com/pagetwo.html</p>
</div>