Question

我很难用jquery用图像替换字符串（URL）。我希望函数在页面加载时运行，并用图像替换文本字符串。我需要它来处理<event-description> http://example.com/pageone.html </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

这应该可以帮助您。 请记住，由于我在循环中使用的是同一张图片，因此所有元素的图片都相同。您可以在对象映射中指向您需要的确切图像，以使其具有动态性，或使用推荐的data属性。

参见下文： ，data-imgurl是此处的图片（徽标）名称

注意：这会将图像添加到您拥有的标签内。如果要删除，请使用$（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>

Answer 3

您可以使用.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>

使用jQuery将<p>元素替换为图像

3 个答案: