javascript - 用 Font Awesome 替换数字 (jQuery)

Question

好的，请不要因为问这个问题而怠慢我，我是 jQuery 的新手。我打算使用 Wordpress 的 Advanced Custom Fields 插件制作自己的评级系统(因为我找不到)。

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

这对第一项很好用，在本例中是 2所以我得到2星。但是第二个值是 5但它显示2星星。看起来它没有看到差异或其他东西。如果我删除替换脚本，它确实会显示 2 和 5。

我已经尝试了几种方法，包括 /1/g我阅读了一些在全局范围内使用它的地方，但这没有用。我需要 foreach 吗？或使这项工作成功的东西？我是否应该放弃替换值的整个想法？

这是我的代码(它输出一个从 1 到 5 的值(没有 .5):

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