Question

我得到了一个dataframes盒子，里面有一些值，默认情况下它的背景是灰色的。我想实现的是根据其.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;
}

Answer 1

您的问题在这里：

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()将字符串转换为int，以便在逻辑运算中进行适当的比较，如：

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

对于健壮的代码，您应该对来自跨度的文本值进行一些额外的检查。如果您获得NaN，该怎么办？

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

可以在此处随意使用固定代码> https://jsfiddle.net/RuiCarvalho/dt3qrxpb/4/

Answer 2

我修改过的脚本存在多个问题。

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 && $("#value").text() <= 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 && $("#value").text() <= 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>

根据值范围更改项目颜色

2 个答案: