如何替换图像的某些单词

Posted 2023-05-09

【中文标题】如何替换图像的某些单词

【英文标题】：How can I a replace certain word for an image

【发布时间】：2020-01-30 10:36:12

【问题描述】：

我正在寻找一种方法来替换特定图像的某些单词。例如：在我输入“logo_purple”这个词的地方需要出现一个特定的图像（logopurple.svg）。 “logo_white”、“logo_black”等的计数相同。

最好的方法是什么？这些标志可以出现在任何地方，但在标题中最常见。

如果 php 中有一个函数（我必须在 functions.php 中添加的东西？这是一个 Wordpress 网站）可以实现这一点，如果 jQuery 不起作用，我会使用它。我更喜欢 jQuery。

提前致谢。

我试过这样：但由于某种原因，它破坏了 toggleClass 功能（我用来切换移动菜单的功能）。

var purple = "<img src='assets/images/logopaars.svg' />";

  $("body:contains('zijn_paars')").html(function (_, html) 
       return html.replace(/zijn_paars/g , purple )
  );

  var white = "<img src='assets/images/logowit.svg' />";
  $("body:contains('zijn_wit')").html(function (_, html) 
       return html.replace(/zijn_wit/g , white )
  );

  var black = "<img src='assets/images/logozwart.svg' />";
  $("body:contains('zijn_zwart')").html(function (_, html) 
       return html.replace(/zijn_zwart/g , black )
  );

  var pink = "<img src='assets/images/logoroze.svg' />";
  $("body:contains('zijn_wit')").html(function (_, html) 
       return html.replace(/zijn_roze/g , pink )
  );

【参考方案1】：

由于某种原因，它破坏了 toggleClass 功能

当您使用.html(html) 时，它会删除该元素的所有现有html，其中包括已连接到该html 的任何相应事件（例如菜单）。

使用$(body).html(..本质上与完全重新加载页面相同，但不调用任何javascript。

在您的情况下，您只需要定位具有文本的节点并仅替换该文本，您可以这样做：

 $("*:contains(" + text + "):last")

（参考：https://***.com/a/927013/2181514）

给予：

function replaceImg(searchString, htmlString) 
  var expr = new RegExp(searchString, "gi");
  $("li:contains(" + searchString + ")").html(function(i, html) 
    return html.replace(expr, htmlString)
  )


replaceImg("purple", "<img src='purple.jpg'/>")
replaceImg("red", "<img src='red.jpg'/>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Some purple text</li>
    <li>Some red text and more red text</li>
    <li>second purple text</li>
  </ul>
</div>

【讨论】：

谢谢！有用！我还发现如果我用“div”或“article”替换“body”，它也不会干预toggleClass，但你的解决方案更干净！再次对我缺乏 jQuery 知识感到抱歉，我只将 t 用于“基本”的东西。

您也可以针对您的替代品，例如<div class="hasreplacements"> 然后$(".hasreplacements")...，但这意味着您需要预先知道替代品的位置。

是的，我知道他们在哪里，但是有多个目标。所以我用“body”来概括它们。