Question

我的方案是我的页面上有4个元素代表评级，这些元素可能彼此不同。

对于这些数据的四舍五入，数学并不完全准确，所以偶尔我会得到5.5/5或.19.5/5我的评分以及data-progress="110"或data-progress="-390"

<div class="radial-progress blue-radial" data-progress="110">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">Product <span>5.5/5</span></div>
    </div>
  </div>
</div>

<div class="radial-progress red-radial" data-progress="110">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">Seller <span>5.5/5</span></div>
    </div>
  </div>
</div>


<div class="radial-progress yellow-radial" data-progress="-390">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">Shipping <span>-19.5/5</span></div>
    </div>
  </div>
</div>

我解决此问题的非常有效的方法是通过:contains

定位该号码

if ($('.blue-radial span:contains("5.5")')) {
  $('.blue-radial span').html('5/5')
  $('.blue-radial').attr('data-progress', '100')
}

if ($('.blue-radial span:contains("5.5")')) {
  $('.blue-radial span').html('5/5')
  $('.blue-radial').attr('data-progress', '100')
}

// ETC...

我不想要针对每个可能的变体进行定位是否有更好的方法来解决这个问题，而无需执行大量if语句，例如捕获所有内容以向下舍入到{ {1}} 100或5/5？

修改

这就是我获取初始数字的方式

Answer 1

您可以这样做：

$('.numbers').find('span').each(function(){
   var text = $(this).text().split('/')[0];
   if(parseFloat(text) > 5) {
     $(this).html('5/5')
  $(this).closest('.radial-progress').attr('data-progress', '100')
   }
   if(parseFloat(text) < 0) {
     $(this).html('0/5')
  $(this).closest('.radial-progress').attr('data-progress', '0')
   }
});

请参阅演示：https://jsfiddle.net/bsbuy3p8/

如果多个元素更高，则将数字限制为0-5向上或向下

1 个答案: