Question

我想添加'RED'颜色，而值为负值，'GREEN'颜色为正值。我试了很多想弄清楚它为什么不起作用但却没有成功。

请更正我的剧本。以下代码有什么问题：

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$(".status")
    .filter(function () {
    return $(this).html() < 0;
})
    .parent().css('color', 'blue');
});
</script>

</head>
<body>

<span class="status">10</span><br />
<span class="status">-1</span>

</body>
</html>

Answer 1

试试这个！

//run code for every element with the status class
$(".status").each(function () { 

   //cache which element is $(this) to make code load faster
   $this = $(this); 

   //cache the text of $(this)
   //parseInt() makes "text" into number so that we can use ">", "<", etc..
   number = parseInt( $this.text() ); 
   
   //if number is great than or equal to zero, make it green
   if (number >= 0) { 
     $this.css("color", "green")

   //if the number is NOT greater than or equal to zero, make it red
   } else {
     $this.css("color", "red")
   }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="status">-10</div>
<div class="status">2</div>

注意：这使得0也为绿色。

改善您的代码：

使用[.each()][1]以便您可以为每个元素运行代码
使用$(this)为元素

您可以使用.html()代替.text()，也可以使用filter函数，但这就是我的工作方式：）

$(document).ready(function () {

$(".status").each(function (){ //add .each

    $(this).filter(function () { //add $(this)
    return $(this).html() < 0;
})
    .css('color', 'blue'); //remove parent
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="status">-10</div>
<div class="status">2</div>

Answer 2

您的代码的主要问题是您将字符串（html()的值）与整数进行比较。您还可以通过提供处理逻辑的addClass()函数来简化代码。试试这个：

$(".status").addClass(function() {
  return parseInt($(this).html(), 10) < 0 ? 'negative' : 'positive';
});

.positive { color: #0C0; }
.negative { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="status">10</span><br />
<span class="status">-1</span>

请注意，从技术上讲，这会将0视为“正”值。如果您不想要这种行为，可以轻松更改addClass()处理函数中的逻辑。

JavaScript＆amp; CSS - 我是这样做的吗？

2 个答案: