将值替换为加载时的图像javascript

我创建一个表

如果778，我想用绿色图像更改状态列。如果是779，则显示红色图像。 这是我的html表单代码

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

有什么想法吗？

---

提前感谢。

如果你能使用CSS，那么使用脚本就更好了

<style>
    .im{
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png")  no-repeat;
            display:inline-block;
            height:10px;
            width:10px;
            background-size: contain;
        }
        .im[status="778"]{  
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png")  no-repeat;
        background-size: contain;
        }
           </style>
    <table>
    <tr>
    <td> {{$penalty}}  </td>
    <td> {{$Total)}}  </td>
    <td> <span id="status" >{{$status}}</span>  <span class="im" status="{{$Total)}}"></span> </td>
    </tr>
    </table>

.im{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png）无重复；
显示：内联块；
高度：10px；
宽度：10px；
背景尺寸：包含；
}
.im[status=“778”]{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png）无重复；
背景尺寸：包含；
}
{{$罚金}
{{$Total}
{{$status}

我在影响CSS的范围中添加了一个属性

status=“{{$Total）}”

。这样您就不会有负载问题，而且工作速度也会更快

这是小提琴：

---

只需将status属性从778更改为其他属性，单击fiddle run，然后查看红色是如何变为绿色的（或者如果您愿意，可以将其反转）。

如果您可以使用CSS，那么最好使用脚本

<style>
    .im{
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png")  no-repeat;
            display:inline-block;
            height:10px;
            width:10px;
            background-size: contain;
        }
        .im[status="778"]{  
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png")  no-repeat;
        background-size: contain;
        }
           </style>
    <table>
    <tr>
    <td> {{$penalty}}  </td>
    <td> {{$Total)}}  </td>
    <td> <span id="status" >{{$status}}</span>  <span class="im" status="{{$Total)}}"></span> </td>
    </tr>
    </table>

.im{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png）无重复；
显示：内联块；
高度：10px；
宽度：10px；
背景尺寸：包含；
}
.im[status=“778”]{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png）无重复；
背景尺寸：包含；
}
{{$罚金}
{{$Total}
{{$status}

我在影响CSS的范围中添加了一个属性

status=“{{$Total）}”

。这样您就不会有负载问题，而且工作速度也会更快

这是小提琴：

---

只需将status属性从778更改为其他属性，单击fiddle run，然后查看红色是如何变为绿色的（或者如果愿意，将其反转）。

您的html无效，因为：

id

需要是唯一的，不要在每行重复-使用类

您正在使用

标记关闭

元素

假设您解决了这个问题，那么您的JS将尝试设置

元素的

src

，但您需要一个

”；
$（'.status:contains（779）'）.html（“”）；
})；

img{高度：30px；}

{{$罚金}{{$总额}}778
{{$罚金}{{$总额}}779
{{$罚金}{{$总额}}778

您的html无效，因为：

id

需要是唯一的，不要在每行重复-使用类

您正在使用

标记关闭

元素

假设您解决了这个问题，那么您的JS将尝试设置

元素的

src

，但您需要一个

”；
$（'.status:contains（779）'）.html（“”）；
});
img{高度：30px；}

{{$罚金}{{$总额}}778
{{$罚金}{{$总额}}779
{{$罚金}{{$总额}}778
与一起使用

在src属性中使用像
{{hash}}
这样的角度标记是不正确的：浏览器将从URL中获取文本{{hash}}，直到Angular替换了{{hash}中的表达式。ngSrc指令解决了这个问题


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.elems=[{
罚则:0,，
总数：100，
现状：778
}, {
罚则:0,，
总数：200，
现状：779
}, {
罚则:0,，
总数：300，
现状：778
}]
});

处罚
全部的
地位
{{el.惩罚}
{{el.total}
与一起使用

在src属性中使用像
{{hash}}
这样的角度标记是不正确的：浏览器将从URL中获取文本{{hash}}，直到Angular替换了{{hash}中的表达式。ngSrc指令解决了这个问题


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.elems=[{
罚则:0,，
总数：100，
现状：778
}, {
罚则:0,，
总数：200，
现状：779
}, {
罚则:0,，
总数：300，
现状：778
}]
});

处罚
全部的
地位
{{el.惩罚}
{{el.total}
以有角度的方式完成！使用
ng src
。将您的src=“”替换为ng src=“”。您已将
src
属性添加到span标记。您应该使用一个
img
标记并向其添加属性。@Rayon@Newbee Dev@DVJex我已将src更改为ng src，但没有发生。仍然显示为数字778@ardigunawan-这不仅仅是改变src，你还需要操纵src路径..以有角度的方式去做！使用
ng src
。将您的src=“”替换为ng src=“”。您已将
src
属性添加到span标记。您应该使用一个
img
标记并向其添加属性。@Rayon@Newbee Dev@DVJex我已将src更改为ng src，但没有发生。仍然显示为数字778@ardigunawan-这不仅仅是改变src
，你也可以操纵src路径..谢谢你的回答，但我指的是这些不能用于循环，也可以在没有循环的情况下使用。。我更喜欢用
Angular
来避免
jQuery
。。这可能取决于个人选择…谢谢你的回答，但我指的是这些不能用于循环，也可以不使用循环。。我更喜欢用
Angular
来避免
jQuery
。。它可以