Question

好的，请不要因为提出这个问题而懈怠，我对jQuery很陌生。我喜欢使用Wordpress的高级自定义字段插件制作我自己的评级系统（因为我找不到）。

我有一个名为Ranking的ACF，其中我填写一个数字，例如1.使用我在Stackoverflow上找到的replace函数我将1替换为<i class="fa fa-star" aria-hidden="true"></i>（一颗星）来自Font Awesome）。

这适用于第一项，在这种情况下它是2所以我得到2星。但第二个值是5，但它会显示2个星星。看起来它没有看到差异或其他什么。如果我删除替换脚本，它实际上显示了2和5。

我尝试了几件事，包括/1/g我在全球范围内阅读了一些使用它的地方，但这并没有奏效。我需要foreach或其他东西来完成这项工作吗？我应该放弃这个取代价值观的整个想法吗？

这是我的代码（输出1到5之间的值（No.5和＃39）：

<?php if( get_field('ranking') ): ?>
      <tr>
        <td class="td-top">Ranking:</td>
        <td class="star_ranking"><?php the_field('ranking'); ?></td>
      </tr>
<?php endif; ?>

和jQuery：

$('.star_ranking').html($('.star_ranking').html().replace(/1/g,'<i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/2/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/3/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/4/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/5/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));

我搜索过Stackoverflow但我找不到类似的问题。

Answer 1

您可以使用解决方案https://jsfiddle.net/9fo1fz77/

$('.star_ranking').each(function() {
	var starCnt = parseInt($(this).html());
  $(this).html('');
  for(var i=0; i<starCnt; i++){
  	$(this).append('<i class="fa fa-star" aria-hidden="true"></i>');
  }
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="td-top">Ranking:</td>
      <td class="star_ranking">1</td>
    </tr>
    <tr>
      <td class="td-top">Ranking:</td>
      <td class="star_ranking">2</td>
    </tr>
    <tr>
      <td class="td-top">Ranking:</td>
      <td class="star_ranking">5</td>
    </tr>
  </tbody>
</table>

Answer 2

Shiladitya的回答是我通常采用的方式，但你也可以考虑尝试repeat()方法：

jQuery(document).ready(function(){
  var faIcon = '<i class="fa fa-star" aria-hidden="true"></i>';

  jQuery('.star_ranking').each(function(){
    jQuery(this).html(
    faIcon.repeat(
      parseInt( jQuery(this).html() )
    ));
  });

});

（您可以在https://jsfiddle.net/travisseitler/phLndwpy/看到它。）

注意： repeat()是ECMAScript 6的一部分，所以它不像Shiladitya的回答那样向后兼容。但是，所有当前的浏览器都支持它，所以YMMV。

用Font Awesome（jQuery）替换数字

2 个答案: