Question

我正在开发一个Web应用程序，它作为一个表，列中包含一些数据。特别是我有一个名为Change的列，其下面包含一些数据，如下所示

            <td data-bind="text: GradeName"></td>
            <td data-bind="text:Price"></td>
            <td data-bind="text:Change"></td>

Change的值可以是负数或正数，但如果它是负数，我希望该值以红色显示，否则为黑色。

我可以知道这样做的好方法吗？

Answer 1

没有CSS选择器允许您根据其内容设置元素的样式，因此您无法在CSS中完全执行此操作。

但是，Knockout可以在绑定数据时为您设置样式：您可以使用css binding或style binding。这是一个样式绑定示例：

<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>

现场演示：

＆＃13;

ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
  <td data-bind="text:GradeName"></td>
  <td data-bind="text:Price"></td>
  <td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
  <td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>

＆＃13;

Answer 2

你可以这样做：

@Override public void onMapLongClick(final LatLng point) {

此规则仅匹配属性为td[data-bind*="text:Change:-"] { color: red; }的{{1}}，并以<td/>开头，表示负数。

Example on CodePen

Answer 3

如果你想使用jQuery，那么这是我的解决方案Versions Maven Plugin, Basic Usage：

{{1}}

上面的代码假定在数据属性Change引用的td元素中找到正/负值。我很乐意在澄清之后对此答复进行修改。

根据该元素中的值将css分配给元素

3 个答案: