在wordpress中使用Jquery隐藏带有图像的文本

Hide Text with Image Using Jquery in wordpress

本文关键字：图像 文本 隐藏 Jquery wordpress      更新时间：2023-09-26

如果这很简单，我提前道歉，但我对Jquery没有太多了解。

我有一个网站，可以为会员自动执行通过/失败功能。

在用户配置文件上，他们被传递的地方，我希望它显示一个图像。 我希望数据库仍然记录单词 PASSED，并且仅在页面上替换它，以免数据库被更改。

文本如下所示 

  <div class="member-field-type"><i class="member-icon-ok"></i>
  <span>Status</span></div> <div class="member-field-value">Passed</div>
由于类"成员字段

类型"和"成员字段值"在页面上多次使用，因此我无法更改此类的所有实例。 这就是为什么我不能作为 css 执行此操作的原因。

我只想在 DIV 中隐藏"通过"文本并显示图像。

我已经尝试了各种方法，但无法使其工作。

 var str="<div class="member-field-value">Passed</div>";
 document.write(str.replace("Passed", "<img alt="Passed" src="/passed.png"/>"));
 }

无论如何，我认为上述内容将取代而不是隐藏。

谁能帮忙。在互联网上搜索了 2 天并尝试了各种代码建议后，我不知所措。

本示例将文本换行并隐藏

$('.member-field-value').filter(function(){
    return $(this).text() === 'Passed'; 
}).contents().wrap('<span style="display:none"></span>')
       .end().append('<img src="pass.jpg"/>');

如果你能向div 添加一个 id 属性，那么对于你的代码来说，这将更容易、更高效：

<div id="myDiv" class="member-field-value">Passed</div>

但是，如果您绝对必须在没有的情况下执行此操作，则需要使用类member-field-value遍历每个div，找到具有正确内容的div并将其替换为您的图像：

$('.member-field-value').each(function(){
    $this = $(this);
    // Check if the content matches
    if($this.html() == "Passed"){
        // Replace the content with the new wrapped text and image
        $this.html('<div id="passedText">Passed</div><img alt="Passed" src="/passed.png"/>');
        // Hid the text
        $this.find('#passedText').hide();
    }
});

相反，如果您只需添加id这就是您所需要的：

// Replace the text
$('#myDiv').html('<div id="passedText">Passed</div><img alt="Passed" src="/passed.png"/>');
// Hide the text
$('#myDiv #passedText').hide();
相关文章：