javascript - 根据一个值将一个类分配给多个元素

Question

我构建了一个简单的函数，它根据元素的值分配一个包含颜色的类。我的问题是我是否必须循环遍历我的元素才能执行此操作？

这是我的 jsfiddle

HTML

<div>
 <ul>
     <li class="MyScore">90</li>
     <li class="MyScore">82</li>
     <li class="MyScore">77</li>
     <li class="MyScore">66</li>
     <li class="MyScore">62</li>
     <li class="MyScore">50</li>
     <li class="MyScore">42</li>
 <ul>
</div>  

CSS

  .good{
     background-color: green;
  }
   .okay{
       background-color: yellow;
  }
   .bad{
     background-color: red;
  }

JS

 function scoreColor(score){
    var score = document.querySelector('.MyScore').innerHTML;
    var scoreColor = document.querySelector('.MyScore');



    if(score > 85){
        scoreColor.className + ' good';
        console.log('good');

    } else if(score > 65 && score < 85 ){
        scoreColor.className + ' okay';
        console.log('okay');
    } else {
        scoreColor.className + ' bad';
        console.log('bad');
    }
}
scoreColor();

谢谢

Answer 1

试试这个，看看里面的评论(fiddle):

 function scoreColor() {
     var scores = document.querySelectorAll('.MyScore'); // get all elements with .Myscore

     Array.prototype.forEach.call(scores, function (item) { // iterate the elements

         var score = parseInt(item.innerText, 10); // get the value from the text and parse it

         if (score > 85) {
             item.classList.add('good'); // add good to the item classList
             console.log('good');

         } else if (score > 65 && score < 85) {
             item.classList.add('okey'); // add okey to the item classList
             console.log('okay');
         } else {
             item.classList.add('bad'); // add bad to the item classList
             console.log('bad');
         }
     });


 }
 scoreColor();