Добавить классы div на основе цикла for

Question

Я пытаюсь создать функцию, которая добавляет некоторое имя класса к нескольким элементам div на основе переменной. Эти имена классов будут использоваться для звездной рейтинговой системы.

Я ищу такой конечный результат, когда productScore равно 3.5:

 <span class="star fa fa-star on"></span>
 <span class="star fa fa-star on"></span>
 <span class="star fa fa-star on"></span>
 <span class="star fa fa-star semi"></span>
 <span class="star fa fa-star off"></span> 

Таким образом, в основном нужно добавить 3 имени класса -> on, off и semi

Итак, что у меня есть это:

function reviewStars(productScore, container){
  for (i=0; i < productScore; i++) {
    var starClass = productScore - i >= 1 ? 'on' : (productScore - i >= 0.5 ? 'semi' : 'off') 
    $(container).html('<span class="star fa fa-star' + starClass + '</span>')
  }
}

Я хочу использовать эту функцию на своем веб-сайте. Так что это многоразово, где я хочу. Вот так:

 function initOfferList(){
      // ... code ... 
      $.each(data.products, function(i, product) {
       // ... more code ... 

        var productScore = (product.score * 5) // example 3.5
        var stars = reviewStars(productScore, '.item-rating')
        content += '<div class="item-rating">'+ stars +'</div>';

         // ... more code ....

      }

Мой код продолжает возвращаться undefined. Я не могу понять, почему это не определено.

У кого-нибудь есть идея?

Answer 1

То, что я вижу в вашем коде, может быть, вам не нужно container

function reviewStars(productScore){
  var result = '';
  
  for (i=0; i < productScore; i++) {
    var starClass = productScore - i >= 1 ? 'on' : (productScore - i >= 0.5 ? 'fa-star-half-alt semi' : 'off');
    result += '<span class="star fa fa-star ' + starClass + '"></span>';
  }
  
  return result;
}

// test
var cont = document.querySelector('.results');
var tests = [1,2,3,4,5,1.5,4.5,3.5];

for(var testScore of tests) {
  cont.innerHTML += '<li>'+reviewStars(testScore)+' | ' + testScore + '</li>';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<ul class="results">
</ul>

Answer 2

если функция reviewStars возвращает строку, ваш код будет работать.

function reviewStars(productScore){
  var container='';
  for (i=0; i < productScore; i++) {
    var starClass = productScore - i >= 1 ? 'on' : (productScore - i >= 0.5 ? 'semi' : 'off') 
    container+='<span class="star fa fa-star' + starClass + '></span>'
  }
  return container;
}