星级评价是从后面得到星星填充

我有这个代码在基于默认值的地方，它填满了星星。例如，如果数字是3，它会填满我3星，但jquery填满它的方式，它使我头两个星星空了，它让我填满了其他三个星星。我有演示here。另外，如果数字是小数点，我该如何填写半星？星级评价是从后面得到星星填充

HTML代码：

<p class="rating" data-default-value="2"> 
<!-- data-default-value="@rev.Rating" --> 
<span data-value="5" class="fa fa-star"></span> 
<span data-value="4" class="fa fa-star"></span> 
<span data-value="3" class="fa fa-star"></span> 
<span data-value="2" class="fa fa-star"></span> 
<span data-value="1" class="fa fa-star"></span> 
</p>

和CSS：

.rated { 
border: 1px solid red; 
} 

.half { 
border: 1px solid blue; 
}

和jQuery：

jQuery(function($) { 
    $('.rating').each(function() { 
    $(this).find('span').slice(-$(this).data('defaultvalue') 
    ).addClass("rated"); 
    }); 
})

来源

2017-10-13 Guillermo Vargas

是问题，这是在相反的顺序填充明星？ –

只需检查['.slice（）']（https://api.jquery.com/slice/） – Andreas

的文档是的，我试图改变jquery，但似乎没有任何工作，也不能得到半星工作要么 –

不使用片（我认为这是更易于阅读）

jQuery(function($) { 
 
    var count = $('.rating').data('defaultValue'); 
 

 
    for(var i = 1; i <= count; i++) 
 
    { 
 
    $('.rating > span[data-value=' + i + ']').addClass("rated"); 
 
    } 
 
})

.rated { 
 
border: 1px solid red; 
 
} 
 

 
.half { 
 
border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<p class="rating" data-default-value="2"> 
 
<!-- data-default-value="@rev.Rating" --> 
 
<span data-value="1" class="fa fa-star">1</span> 
 
<span data-value="2" class="fa fa-star">2</span> 
 
<span data-value="3" class="fa fa-star">3</span> 
 
<span data-value="4" class="fa fa-star">4</span> 
 
<span data-value="5" class="fa fa-star">5</span> 
 
</p>

，如果你真的想使用slice你能做到这样：你需要切“0之间的X”的阵列。如果您使用单个参数调用，则只会获得切片数组的结束部分。有关.slice()方法的更多信息，请参阅the documentation。

jQuery(function($) { 
 
     var count = $('.rating').data('defaultValue'); 
 

 
     $('.rating > span').slice(0, count).addClass("rated") 
 
     
 
    })

.rated { 
 
    border: 1px solid red; 
 
    } 
 

 
    .half { 
 
    border: 1px solid blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <p class="rating" data-default-value="2"> 
 
    <!-- data-default-value="@rev.Rating" --> 
 
    <span data-value="1" class="fa fa-star">1</span> 
 
    <span data-value="2" class="fa fa-star">2</span> 
 
    <span data-value="3" class="fa fa-star">3</span> 
 
    <span data-value="4" class="fa fa-star">4</span> 
 
    <span data-value="5" class="fa fa-star">5</span> 
 
    </p>

来源

2017-10-13 15:43:35 Wndrr

星级评价是从后面得到星星填充

回答

相关问题