根据值范围更改项目颜色

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>