Question

我试图根据我在代码中使用的条件动态显示文本颜色变化。下面是我正在使用的代码。请帮我解决这个问题。

<span class="pendtext" style="font-size:15px;">{{($duepay->status == 'issued') ? 'PENDING' : (($duepay->status == 'paid') ? 'SUCCESSFUL' : $duepay->status)}}</span>


<script>

if($duepay->status == 'issued'){
  $(".pendtext").css('color','green');
}
else{
  $(".pendtext").css('color','yellow');
}

</script>

Answer 1

$duepay->status可能来自您的PHP代码，因此您需要以与HTML中相同的方式在JS中输出它：

if ('{{$duepay->status}}' === 'issued'){
  $(".pendtext").css('color', 'green');
}
else{
  $(".pendtext").css('color', 'yellow');
}

请注意，这可以使用三元表达式缩短：

$(".pendtext").css('color', '{{$duepay->status}}' === 'issued' ? 'green' : 'yellow');

或者将逻辑完全保留在PHP中：

$(".pendtext").css('color', '{{$duepay->status == 'issued' ? 'green' : 'yellow'}});

Answer 2

也许这个：

    <div id="pend" class="pendtext" style="font-size:15px;">

    </div>

    <script>

    if ('{{$duepay->status}}' === 'issued'){
    document.getElementById('pend').innerHTML = "<p>PENDING</p>";
    document.getElementById('pend').style='color:green';
    }
    else{
    document.getElementById('pend').innerHTML = "<p>SUCCESSFUL</p>";
    document.getElementById('pend').style='color:yellow';
    }

    </script>

Answer 3

如果使用PHP，为什么要使用JS？你可以用PHP做

<span class="pendtext" style="font-size:15px;color:{{($duepay->status == 'issued')?'green':'yellow'}}">{{($duepay->status == 'issued') ? 'PENDING' : (($duepay->status == 'paid') ? 'SUCCESSFUL' : $duepay->status)}}</span>

我想根据条件更改文本颜色

3 个答案: