Question

我希望在数据大于零时更改数据的字体颜色。我尝试使用javascript但似乎我做错了。这是代码

<script>
    $(document).ready(function(){
             document.getElementsByTagName("h4").style.color = "#ff0000";
    });
</script>
<?php foreach($query as $row):  ?>
<h4 class = "pendingAmount">Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

Answer 1

修改后只使用php来实现：

<?php foreach($query as $row):  ?>
<h4 class="pendingAmount" <?php if($pending_total[$row->merge_id]>0) echo 'style="color:#ff0000"'; ?>>Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

Answer 2

比较在哪里？

document.getElementsByTagName("h4").style.color = "#ff0000";

这是错的！ document.getElementsByTagName让对象看起来像一个数组，你应该使用document.getElementsByTagName("h4")[index].style.color = "#ff0000"; 索引是一个数字。

你可以试试这个：

$('h4').each(function(){
   $(this).css({'color':'#ff0000'})
})

Answer 3

我建议给你的h4一个id，然后用它来修改这样的样式：

$(document).ready(function(){
  var count = 10;
    if(0 < count) {
      $('.pendingAmount').addClass('colored-pending-amount');
    }
});

<style>.colored-pending-amount{color: #ff0000;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h4 id="pendingAmount" class="pendingAmount">Pending Amount: 10
</h4><br>
</body>
</html>

jsfiddle：https://jsfiddle.net/0a4v23pg/7/

php的代码变为：

<style>.colored-pending-amount{color: #ff0000;}</style>
<script>
    $(document).ready(function(){
             var count = <?php echo $pending_total[$row->merge_id]; ?>;
             $('.pendingAmount').addClass('colored-pending-amount');
    });
</script>
<?php foreach($query as $row):  ?>
<h4 id="pendingAmount class="pendingAmount">Pending Amount: <?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

我希望这会有所帮助。

Answer 4

var eArr = document.getElementsByClassName("demo")
for(i=0;i<eArr["length"];i++){
  if (eArr[i].innerHTML > 0)
    eArr[i].style.color = "#ff0000";
}

<h4 class="demo">3</h4>
<h4 class="demo">0</h4>
<h4 class="demo">-1</h4>
<h4 class="demo">50</h4>

Answer 5

您可以使用或不使用javascript来实现此目的。

Javascript（jQuery）：

<script>
    $(document).ready(function () {
        $('.pendingAmount').each(function () {
            var amount = $(this).find('.amount').text();
            if (amount > 0) {
                $(this).css('color', '#f00');
            }
        });
    });
</script>

<?php foreach($query as $row): ?>
    <h4 class="pendingAmount">
        Pending Amount: ₱<span class="amount"><?php echo $pending_total[$row->merge_id]; ?></span>
    </h4>
    <br>
<?php endforeach; ?>

我在实际金额周围添加了<span class="amount"></span>。使用javascript，我们遍历所有.pendingAmount元素并检查其中的.amount是否大于0.如果是，我们会更改颜色。

PHP＆amp; CSS：

<style> .greater { color: #f00; } </style> <?php foreach($query as $row): ?> <h4 class="pendingAmount<?php echo ($pending_total[$row->merge_id] > 0) ? ' greater' : '' ?>"> Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?> </h4> <br> <?php endforeach; ?>

在这种方法中，我们直接用$pending_total[$row->merge_id]比较PHP是否大于0。如果是，我们会将greater类添加到由<h4>设置样式的CSS。

当数据大于零时，如何更改数据的字体颜色？

5 个答案: