javascript - 根据值范围更改元素颜色

Question

我得到了这个 .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>

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()将字符串转换为整数以正确比较逻辑操作，如:

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

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

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

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