时间戳

首页 > 解决方案 > 根据值范围更改项目颜色

javascript - 根据值范围更改项目颜色

问题描述

我得到了这个.item有一些价值的盒子，默认情况下它的背景是灰色的。我想要实现的是根据其.item-value标签内的值向其添加相应的类。我创建了一个函数setItemColors，但似乎我遗漏了一些东西，我不确定这是否是实现它的好方法......有什么想法可以成为更好的解决方案吗？感谢您的任何建议！

function setItemColors() {
  // If 30 or under, set item class to item--blue
  if( $("#value").text() =< 30 ) {
      $(".item").addClass("item--blue");
    // If 31-79, set item class to item--yellow
  } else if ( $("#value").text() > 31 && <= 79 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
  // If 80-100, set item class to item--red, if there is no value leave only .item class
  else if ( $("#value").text() > 80 && <= 100 ) {
      $(".item").removeClass("item--blue");
      $(".item").addClass("item--red");
  }
}

setItemColors();
.item {
  padding: 20px;
  width: 100px;
  height: 100px;
  background-color: grey;
}

.item--blue {
  background-color: blue;
}

.item--yellow {
  background-color: yellow;
}

.item--red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <span class="item-value" id="value">20</span>
  <span>%<span>
  <p>lorem ipsum</p>
</div>

标签： javascriptjquerycss

解决方案

你的问题在这里：

if( $("#value").text() =< 30 ) {

和这里：

} else if ( $("#value").text() > 31 && <= 79 ) {

和这里：

else if ( $("#value").text() > 80 && <= 100 ) {

它应该是：

if( $("#value").text() <= 30 ) {

和

} else if ( $("#value").text() > 31 && $("#value").text() <= 79 ) {

和

else if ( $("#value").text() > 80 && $("#value").text() <= 100 ) {

此外，不要忘记使用parseInt()将字符串转换为整数，以便在逻辑操作上进行正确比较，如：

if( parseInt($("#value").text()) <= 30 ) {

对于健壮的代码，您应该对来自跨度的文本值进行一些额外的检查。如果你得到一个 NaN，你想做什么？

最后一件事，你的第三个 if 条件没有多大意义，因为它保持红色背景 - 这真的是你想要的吗？（因为如果是，那么条件 2 和 3 可以变成单一逻辑条件，对吧？）

随意使用这里的固定代码> https://jsfiddle.net/RuiCarvalho/dt3qrxpb/4/

推荐阅读