jquery - 如何替换图像的某些单词
问题描述
我正在寻找一种方法来替换特定图像的某些单词。例如:在我输入“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 )
});
解决方案
出于某种原因,它破坏了 toggleClass 功能
当您使用.html(html)
它时,它会删除该元素的所有现有 html,其中包括已连接到该 html 的任何相应事件(例如菜单)。
使用$(body).html(..
本质上与完全重新加载页面相同,但不调用任何 javascript。
在您的情况下,您只需要定位具有文本的节点并仅替换该文本,您可以这样做:
$("*:contains(" + text + "):last")
(参考:https ://stackoverflow.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>
推荐阅读
- angular - 单击按钮更改路由 url
- python - 为什么我不能在模块级别调用此函数?
- reactjs - 如何根据客户端设备大小调整图像大小
- python - 如何在 Python 解释器中提供多个输入 TFlite 模型
- javascript - 如何将req,res传递给callBack函数?
- python - VSCode WxPython 包智能感知“模块‘wx’没有‘框架’成员”
- machine-learning - 当特征向量是字母时如何绘制决策边界
- haskell - 如何在 Haskell 的列表中随机选择一个元素?
- angular - Angular:使用 FormArray 在对象数组上嵌套 ngFor
- python - flink run -py 和 python run 的区别