根据正值或负值更改 div 类 - 值介于 1/0/-1 之间的问题答案

【问题标题】：Change div class based on positive or negative value - issue with values between 1/0/-1根据正值或负值更改 div 类 - 值介于 1/0/-1 之间的问题
【发布时间】：2018-04-16 05:55:44
【问题描述】：

我正在使用这个 sn-p 根据正值或负值更改 div 的类

<script type="text/javascript">$('.price-change').each(function() {
    if (parseInt($(this).text()) < 0) {
        $(this).addClass('negative');
    }
else if (parseInt($(this).text()) >= 0) {
    $(this).addClass('positive');
}
});</script>

我遇到了介于 0 和 1 以及 0 和 -1 之间的值的问题。因此，如果值为 -0.15，它将显示绿色，尽管它需要显示红色，因为在值之前有 -。

为什么会这样？修复它的最佳方法是什么？

提前致谢

【问题讨论】：

添加console.log(parseInt($(this).text(),10))，你会看到发生了什么。它将 -0.15 四舍五入为最接近的整数，即 0，在您的情况下为正数。您正在将非整数与整数进行比较。
使用 parseInt，0 和 1 之间的任何值都只是 0。你不能有负零或正零。它只是简单的 0。

标签： javascript jquery html css class

【解决方案1】：

尝试使用parseFloat 而不是parseInt。 parseInt 会将 -0.15 转换为 0，而 parseFloat 会将其与实际的 -0.15 进行比较。

<script type="text/javascript">
  $('.price-change').each(function() {
    if (parseFloat($(this).text()) < 0) {
      $(this).addClass('negative');
    } else if (parseFloat($(this).text()) >= 0) {
      $(this).addClass('positive');
    }
  });
</script>

小例子：http://jsfiddle.net/6mymcn4c/1/

【讨论】：

优秀。感谢您的帮助和解释。效果很好！

【解决方案2】：

试试.parseFloat():

$('.price-change').each(function() {
  if (parseFloat($(this).text()) < 0) {
    $(this).addClass('negative');
  } else if (parseFloat($(this).text()) >= 0) {
    $(this).addClass('positive');
  }
});

演示

$('.price-change').each(function() {
  if (parseFloat($(this).text()) < 0) {
    $(this).addClass('negative');
  } else if (parseFloat($(this).text()) >= 0) {
    $(this).addClass('positive');
  }
});

.negative{
color: blue;}
.positive{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-change">1</div>
<div class="price-change">0</div>
<div class="price-change">-0.15</div>
<div class="price-change">-10</div>

【讨论】：

【解决方案3】：

为什么会这样

添加console.log(parseInt($(this).text(),10))，您会看到发生了什么。

parseInt 转换为最接近的整数（整数）。 -0.15 不是整数，因此将四舍五入为零，在您的情况下为正数。

有什么办法可以解决？

您可以改用parseFloat()：

$('.price-change').each(function() {
  var val = parseFloat($(this).text());
  $(this).addClass(val < 0 ? 'negative' : 'positive');
]);

或者您可以使用其他函数，例如floor，它返回小于或等于给定数字的最大整数（即始终向下舍入）。

$('.price-change').each(function() {
  var val = Math.floor($(this).text());
  $(this).addClass(val < 0 ? 'negative' : 'positive');
]);

【讨论】：

【解决方案4】：

您可以使用 try 和 catch 来处理这些错误 http://www.javascriptkit.com/javatutors/trycatch.shtml 要么您可以使用 If 条件并手动处理这些已知条件下的输出代码中的结果

终于可以用这个了：

$('.price-change').each(function() {var x = parseFloat($(this).text();If(x>0){x.addClass('negative');} else{ x.addClass('positive');}});

【讨论】：