将所有"✔"符号设置为绿色，将所有"✘"符号设置为红色

Question

我正在构建其中一个html表，比较不同的定价选项及其包含的功能，例如：

<table>
<tr><th></th><th>free</th><th>lite</th></tr>
<tr><th>Example feature</th><th>✘</th><th>✔</th>
</table>

我想尝试所有绿色的刻度，所有红色的支票。我认为最好的方法可能是在javascript或jquery中使用onload，根据每个表格单元格中找到的符号设置所有css属性。

这是最有效的方法吗？如果是这样，有人可以提供指导我如何：

1. 识别页面上每次出现的特定符号。
2. 在页面加载时为每个匹配项设置 CSS 属性。

非常感谢！

Answer 1

你可以使用 JavaScript 或 jQuery，但我看不出有任何充分的理由，除非你想在以后动态地改变一些东西。 您可以设置每个具有 x 的元素的类或签入其中，只需使用普通的旧 CSS。

.HTML：

<table>
<tr><th></th><th>free</th><th>lite</th></tr>
<tr><th>Example feature</th><th class="x">✘</th><th class="check">✔</th>
</table>

.x {
    color: red;
}
.check {
    color: green;
}

Answer 2

像在任何元素上设置颜色一样设置它，以某些内容为目标，并使用css()设置颜色

$('th:contains(✘)').css('color','red');
$('th:contains(✔)').css('color','green');

小提琴

或

$('th').css('color', function() {
    return $(this).text().indexOf('✘') != -1 ? 'red' : 
           $(this).text().indexOf('✔') != -1 ? 'green' : '';
});

小提琴

Answer 3

与其写✘，不如写

<span class='x-highlight'>✘</span>

或者之后，

html = html.replace("✘", "<span class='x'>✘</span>");

Answer 4

看看我创建的这个JSFiddle。这可以通过简单的CSS来完成，但你要求使用jQuery/JavaScript。

.HTML：

<table>
    <tr>
        <th></th>
        <th>free</th>
        <th>lite</th>
    </tr>
    <tr>
        <th>Example feature</th>
        <th class="cross">✘</th>
        <th class="check">✔</th>
</table>

j查询：

$(document).ready(function(){
    $('.cross').css('color', 'red');
    $('.check').css('color', 'green');
});

Answer 5

只需使用绿色图像进行勾号，使用红色图像进行检查...无需在这里变得复杂:)

如果你不想这样做，那么只需在包含检查或十字的<th>上做一个class="cross"，class="check"，然后在该类中适当地设置文本颜色......或者你甚至可以直接在样式中做到这一点。