javascript - 在加载 JavaScript 时将值替换为图像

Question

我创建一个表

我想用绿色图像(如果 778)和红色图像(如果 779)更改状态列。这是我的 html 表单代码

<td> {{$penalty}}  </div>
<td> {{$Total)}}  </div>
<td> <span id="status">{{$status}}</span>   </div>

所以，如果人们打开网页，他们将不会再看到带有数字的状态栏，而是变成一个图像。

var status = document.getElementById("status").innerHTML;
    if(status == 778){
        $('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png');
    }else{
        $('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png');
    }  

有什么 JavaScript 想法吗？提前致谢。

Answer 1

您的 html 无效，因为:

1. id需要是唯一的，不能在每一行中重复 - 请改用类。
2. 您即将关闭 <td>具有 </div> 的元素标签。

假设你解决了这个问题，那么你的 JS 会尝试设置 src 。的<span>元素，但您需要一个 <img> 。使用 :contains() selector 插入适当的图像非常简单。和 .html() method :

$(document).ready(function() {

  $('.status:contains(778)').html("<img title='778' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png'>");

  $('.status:contains(779)').html("<img title='779' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'>");

});

img { height: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">779</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
</table>

我已经设置了每个 <img>元素的title属性为 778或779因此，如果用户将鼠标悬停在图像上，则可以看到这些值。请注意，使用 .html()将覆盖 <span> 的文本与 <img> 。如果您希望数字显示在图像旁边，请使用 .append()或.prepend()而不是.html() 。如果您希望图像作为背景，并且数字位于图像顶部，请使用 CSS 执行一些操作，如 O_Z's answer .