javascript - 基于for循环添加div类

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 ....

      }

我的代码不断返回未定义。我不明白为什么它是未定义的。

有人有想法吗？

Answer 1

如果函数 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;
}