Question

我可以知道如何使用jQuery根据html单词区分颜色吗？它是正确的代码，如下所示？我试了很多次都没用。

HTML

<?php if($cartPrice >= $delivery->price): ?>

jQuery

<span id="Status">TERMINATED</span>

Answer 1

试试下面修改过的代码。如果您有这方面的问题，请告诉我。

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
    <title>Sample For Text Color Change</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">   
        $(document).ready(function () {
            $('span#Status').each(function () {
                if ($(this).html() == 'ACTIVE') {
                    $(this).css('color', 'green');
                } else if ($(this).html() == 'TERMINATED') {
                    $(this).css('color', 'red');
                }
            });
        });

    </script>

</head>
<body>
    <form>
        <span id="Status">ACTIVE</span>
        <span id="Status">TERMINATED</span>
    </form>
</body>
</html>

Answer 2

通过在 each() 方法中指定元素 id，您犯了一个错误，因为 id 是一个唯一属性，不应在文档中重复多次。如果您有多个具有状态显示的元素，则指定唯一的 id。像这样：

<span id="Status1">TERMINATED</span>
<span id="Status2">ACTIVE</span>

或者将 Status 指定为一个类。像这样：

<span class="Status">TERMINATED</span>
<span class="Status">ACTIVE</span>

$(document).ready(function () {
    $("span.Status").each(function () {
        if ($(this).html() == "ACTIVE") {
            $(this).css("color", "green");
        } else if ($(this).html() == "TERMINATED") {
            $(this).css("color", "red");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="Status">TERMINATED</span>
<span class="Status">ACTIVE</span>

jquery html() 根据文本条件改变不同颜色

2 个答案: