Question

我需要在以下<span>中多次替换数字（1到5）：

<div>English <span class="star-rating">3</span></div>
<div>French <span class="star-rating">4</span></div>    
<div>German <span class="star-rating">5</span></div>
<div>Italian <span class="star-rating">4</span></div>
<div>Spanish <span class="star-rating">3</span></div>
<div>Portuguese <span class="star-rating">1</span></div>    
<div>Arabic <span class="star-rating">1</span></div>

准备好星级评分＆＃39;样式表类：

一星级：

<i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>

2星：

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>

3星：

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>

4星：

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i>

对于5星：

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i>

我试过这个jquery但似乎没有发生任何事情：

<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
    $(".star-rating").html().replace('1','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
    $(".star-rating").html().replace('2','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
    $(".star-rating").html().replace('3','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
    $(".star-rating").html().replace('4','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i></span>');
    $(".star-rating").html().replace('5','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-full"></i></span>');
})
</script>

知道我做错了吗？

Answer 1

只需返回元素jQuery(function($) { $(".star-rating").html(function(_,n) { return Array.apply(null, Array(+n)).map(function() { return $('<i />', { 'class' : 'fa fa-star star-full' }); }); }) });次

{{1}}

Answer 2

你可能不需要jQuery来完成这个简单的任务，CSS工作正常。

查看此示例： https://jsfiddle.net/axbyed9t/

这是修改后的链接示例，其中包含带＃的类，因此如果您之前执行此操作，则可以轻松地动态输出html标记1,2,3 https://jsfiddle.net/axbyed9t/2/

所以不要只是在span中输出1,2,4，而只需将它添加到span的类中，即s1 s2 s3或star1，star2等。然后在CSS中使用适当的unicode for FontAwesome。

填充明星使用：\ f005 对于空星使用：\ f006

HTML代码示例：

<div>English <span class="star-rating star3">3</span></div>
<div>Portuguese <span class="star-rating star1">1</span></div>

CSS将是：

 .star-rating.star3:after {
  font-family: FontAwesome;
  content: "\f005\f005\f005\f006\f006";
  padding-left: 10px;
}

.star-rating.star1:after {
  font-family: FontAwesome;
  content: "\f005\f006\f006\f006\f006";
  padding-left: 10px;
}

Answer 3

说实话，你应该看一下Angularjs，他提供有用的功能来改变视图，例如使用ng-repeat，你应该有类似的东西：

<img ng-repeat="limitTo: yourVariable" src="localhost/path/yourImg.jpg">

解释：

yourVariable：只需恢复想要显示的星数，并将此变量设置为您拥有的数字。

limitTo只是众多ng-repeat过滤器中的一个，你可以使用一个变量，一个返回true / false的函数（但我建议使用自定义过滤器）来以特定的方式正确过滤你的循环。

真的，对于像这样的东西，你应该使用Angular。

是的，对不起语法，法国面包就在这里。

Answer 4

您应该将替换语句的结果分配给html。但即便如此，这也会失败。

你可以做这样的事情，让你的生活更轻松。它并不完美，但它会起到作用

我希望它能运作，它是未经测试的代码，但你明白了

jQuery(document).ready(function($) {
    var full = '<i class="fa fa-star star-full"></i>';
    var empty = '<i class="fa fa-star-o star-empty"></i>';
    $(".star-rating").each(function() {
        var stars = parseInt($(this).text());
        var html = '';
        for(var i = 0; i < 5; i++) {
            if(stars > i) {
               html += full;
            } else {
               html += empty;
            }
        }
        $(this).html(html);
    });
});

jquery用html元素替换数字（1到5）以创建星级

4 个答案: