Javascript 在jQuery和if/else语句中使用PHP

我有5个圆圈，它们出现在一个div中，根据特定事物的精度而变化

比如,； if（精度1<20）{ $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； } 其他（精度1>=20和精度1<40）{ $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； } 其他（精度1>=40和精度1<60）{ $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； } 其他（精度1>=60和精度1<80）{ $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； } 否则{ $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； $（“”）.appendTo（“#circlesdiv1”）； } $s1和$s2是前面在PHP标记中声明的数字，我将其转换为0到100之间的精度

---

它不起作用，显然很乱。我做错了什么？我该如何清理它呢？

下面是清理代码的方法

使用repeater重复字符串，而不是重复代码

使用

：lt

选择器选择索引小于所提供值的所有元素

//重复字符串num次
String.prototype.repeat=函数（num）{
返回新数组（num+1）。加入（this）；
};
var精度1=70；//将是动态的
var totalCircles=5，
noOfFilledCircles=Math.ceil（精度1/20）；
noOfFilledCircles=noOfFilledCircles>5？5：无固定圆；
var circleHtml=''；
$（'#circlesdiv1'）.append（circleHtml.repeat（totalCircles））.find（'div:lt（'+noofficeldcircles+'）））.addClass（'accuracycircle1'）
div#circlesdiv1{
高度：30px；
宽度：200px；
背景色：#3C3E46；
}
#圆圈1.精度圆圈{
背景色：#8A8A8A；
显示：内联块；
宽度：15px；
高度：15px；
边界半径：50%；
保证金：5px；
}
分区精度圆1{
背景色：#DBFF94！重要；
}
以下是清理代码的方法

使用repeater重复字符串，而不是重复代码
使用
：lt
选择器选择索引小于所提供值的所有元素


//重复字符串num次
String.prototype.repeat=函数（num）{
返回新数组（num+1）。加入（this）；
};
var精度1=70；//将是动态的
var totalCircles=5，
noOfFilledCircles=Math.ceil（精度1/20）；
noOfFilledCircles=noOfFilledCircles>5？5：无固定圆；
var circleHtml=''；
$（'#circlesdiv1'）.append（circleHtml.repeat（totalCircles））.find（'div:lt（'+noofficeldcircles+'）））.addClass（'accuracycircle1'）
div#circlesdiv1{
高度：30px；
宽度：200px；
背景色：#3C3E46；
}
#圆圈1.精度圆圈{
背景色：#8A8A8A；
显示：内联块；
宽度：15px；
高度：15px；
边界半径：50%；
保证金：5px；
}
分区精度圆1{
背景色：#DBFF94！重要；
}
以下是清理代码的方法

使用repeater重复字符串，而不是重复代码
使用
：lt
选择器选择索引小于所提供值的所有元素


//重复字符串num次
String.prototype.repeat=函数（num）{
返回新数组（num+1）。加入（this）；
};
var精度1=70；//将是动态的
var totalCircles=5，
noOfFilledCircles=Math.ceil（精度1/20）；
noOfFilledCircles=noOfFilledCircles>5？5：无固定圆；
var circleHtml=''；
$（'#circlesdiv1'）.append（circleHtml.repeat（totalCircles））.find（'div:lt（'+noofficeldcircles+'）））.addClass（'accuracycircle1'）
div#circlesdiv1{
高度：30px；
宽度：200px；
背景色：#3C3E46；
}
#圆圈1.精度圆圈{
背景色：#8A8A8A；
显示：内联块；
宽度：15px；
高度：15px；
边界半径：50%；
保证金：5px；
}
分区精度圆1{
背景色：#DBFF94！重要；
}
以下是清理代码的方法

使用repeater重复字符串，而不是重复代码
使用
：lt
选择器选择索引小于所提供值的所有元素


//重复字符串num次
String.prototype.repeat=函数（num）{
返回新数组（num+1）。加入（this）；
};
var精度1=70；//将是动态的
var totalCircles=5，
noOfFilledCircles=Math.ceil（精度1/20）；
noOfFilledCircles=noOfFilledCircles>5？5：无固定圆；
var circleHtml=''；
$（'#circlesdiv1'）.append（circleHtml.repeat（totalCircles））.find（'div:lt（'+noofficeldcircles+'）））.addClass（'accuracycircle1'）
div#circlesdiv1{
高度：30px；
宽度：200px；
背景色：#3C3E46；
}
#圆圈1.精度圆圈{
背景色：#8A8A8A；
显示：内联块；
宽度：15px；
高度：15px；
边界半径：50%；
保证金：5px；
}
分区精度圆1{
背景色：#DBFF94！重要；
}
您真的不想再像这样重复代码了。使用循环和条件生成内容。想象一下，你有100个圆圈要显示，你会重复100行代码100次吗？你真的会复制粘贴10000行代码吗？此外，每个
（'#circlesdiv1'）
都是对DOM的调用，需要执行一次并缓存

这是一个qui
$(document).ready(function(){

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