NooBskie NooBskie - 2 months ago 8
HTML Question

Restrict number to 0-5 round up or down if higher on multiple elements

My scenario is I have 4 elements on my page that represent a rating these can all be different from each other.

The math isnt entirely accurate on the rounding of these so occasionaly I will get

5.5/5
or
.19.5/5
on my rating as well as
data-progress="110"
or
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>


My hacky non efficient way of fixing this problem has been targeting the number via
: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...


I don't want to have to target for every possible variation is there a better way of going about this without having to do a bunch of
if
statements like a catch all to round down to either
100
5/5
or
0
?

EDIT

<?php
$rates['desc']['score'] = 4.0;
$rates['service']['score'] = 4.0;
$rates['shipping']['score'] = 4.0;
$rates['desc']['score'] = floor((($rates['desc']['score'] - 3.9) * 5) * 2) / 2;
$rates['service']['score'] = floor((($rates['service']['score'] - 3.9) * 5) * 2) / 2;
$rates['shipping']['score'] = floor((($rates['shipping']['score'] - 3.9) * 5) * 2) / 2;
$average = floor((($rates['desc']['score'] * 0.5) + ($rates['service']['score'] * 0.2) + ($rates['shipping']['score'] * 0.3)) * 2) / 2;
?>


This is how I am getting the initial numbers

Answer

You can do something like this:

$('.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')
   }
});

see demo:https://jsfiddle.net/bsbuy3p8/