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

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

Answer 2

我在您的代码中看到的内容也许不需要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>

基于for循环添加div类

2 个答案: