javascript - Using PHP inside jQuery and if/else statements -
i have 5 circles appear inside div change depending on accuracy of thing.
for example <20 accuracy 1 filled (red) circle, 4 unfilled circles.
visual: 60-80 accuracy http://puu.sh/hnjsr/20af976827.png
the below code inside:
$(document).ready(function(){ the code:
var accuracy1 = <?php echo 100*(1-$s1/1.33333); ?>; var accuracy2 = <?php echo 100*(1-$s2/1.33333); ?>; if (accuracy1 < 20) { $('<div class="accuracycircle accuracycircle1"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); } elseif(accuracy1 >= 20 && accuracy1 < 40) { $('<div class="accuracycircle accuracycircle2"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle2"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); } elseif(accuracy1 >= 40 && accuracy1 < 60) { $('<div class="accuracycircle accuracycircle3"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle3"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle3"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); } elseif(accuracy1 >= 60 && accuracy1 < 80) { $('<div class="accuracycircle accuracycircle4"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle4"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle4"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle4"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircleunfilled"></div>').appendto('#circlesdiv1'); } else { $('<div class="accuracycircle accuracycircle5"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle5"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle5"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle5"></div>').appendto('#circlesdiv1'); $('<div class="accuracycircle accuracycircle5"></div>').appendto('#circlesdiv1'); } $s1 , $s2 numbers declared earlier in php tag transform make accuracy between 0 , 100.
it doesn't work , messy. doing wrong , how clean too?
here how can clean code.
- use repeater repeat string, instead of repeating code
- use
:ltselector select elements having index less provided
// repeat string num times string.prototype.repeat = function(num) { return new array(num + 1).join(this); }; var accuracy1 = 70; // dynamic var totalcircles = 5, nooffilledcircles = math.ceil(accuracy1 / 20); nooffilledcircles = nooffilledcircles > 5 ? 5 : nooffilledcircles; var circlehtml = '<div class="accuracycircle"></div>'; $('#circlesdiv1').append(circlehtml.repeat(totalcircles)).find('div:lt(' + nooffilledcircles + ')').addclass('accuracycircle1');div#circlesdiv1 { height: 30px; width: 200px; background-color: #3c3e46; } #circlesdiv1 .accuracycircle { background-color: #8a8a8a; display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin: 5px; } div.accuracycircle1 { background-color: #dbff94 !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="circlesdiv1"></div>