我想用绿色图像(如果 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 想法吗? 提前致谢。
最佳答案
您的 html 无效,因为:
-
id
需要是唯一的,不能在每一行中重复 - 请改用类。 - 您即将关闭
<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 .
关于javascript - 在加载 JavaScript 时将值替换为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39696361/