Question

我创建了一个表

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

Thumb

因此，如果人们打开网页，他们就不会再次看到状态栏中的数字，而是会成为图片。

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

任何JavaScript的想法？提前谢谢。

Answer 1

如果你可以使用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>

我在影响CSS的范围中添加了属性status="{{$Total)}}"。通过这种方式，您不会遇到负载问题，并且可以更快地运行。

这是小提琴：https://jsfiddle.net/ngdtfuej/ 只需将状态属性从778更改为其他内容，单击小提琴运行，然后查看红色变为绿色（如果喜欢，则将其反转）。

Answer 2

您的HTML无效，因为：

id需要是唯一的，而不是在每一行中重复 - 而是使用一个类。
您正在使用<td>代码关闭</div>个元素。

假设您已经解决了这个问题，那么您就会遇到JS正在尝试设置src元素的<span>的问题，但您需要<img>。使用:contains() selector和.html() method：

＆＃13;

$(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'>");

});

＆＃13;

img { height: 30px; }

＆＃13;

<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>

＆＃13;

我已将每个<img>元素的title属性设置为778或779，以便用户可以看到值，如果它们悬停在鼠标悬停在图像上。请注意，使用.html()会使用<span>覆盖<img>的文字。如果您希望数字显示在图片旁边，请使用.append()或.prepend()代替.html()。如果您希望图像作为背景，并且图像顶部有数字，那么请使用O_Z's answer中的CSS执行某些操作。

Answer 3

将ng-src与ternary operator

一起使用

在src属性中使用{{hash}}之类的Angular标记无法正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}中的表达式}}。 ngSrc 指令解决了这个问题。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.elems = [{
    penalty: 0,
    total: 100,
    status: 778
  }, {
    penalty: 0,
    total: 200,
    status: 779
  }, {
    penalty: 0,
    total: 300,
    status: 778
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr>
    <th>Penalty</th>
    <th>Total</th>
    <th>Status</th>
  </tr>
  <tr ng-repeat="el in elems">
    <td>{{el.penalty}}</td>
    <td>{{el.total}}</td>
    <td> <span class="status">
      <img ng-src="{{el.status==778?'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png':'https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'}}" alt="">
    </span>
    </td>
  </tr>
</table>

在加载javascript上用图像替换值

3 个答案:

Fiddle Demo