Question

我在div中出现了5个圆圈，这些圆圈根据某个东西的准确性而变化。

例如＆lt; 20精度只有1个填充（红色）圆圈，有4个未填充的圆圈。

视觉：这是60-80准确度 http://puu.sh/hnJsR/20af976827.png

以下代码在里面：

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

代码：

#PUT /:id/user/update_security_settings

$ s1和$ s2是先前在PHP标记中声明的数字，我将其转换为0到100之间的精度。

它不起作用，显然非常凌乱。我做错了什么，我怎么能把它清理干净？

Answer 1

以下是清理代码的方法。

使用repeater重复字符串，而不是重复代码
使用:lt选择器选择索引小于提供的

Demo

// Repeat a string num times
String.prototype.repeat = function(num) {
  return new Array(num + 1).join(this);
};

var accuracy1 = 70; // Will be 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>

Answer 2

你真的想停止像这样重复你的代码。使用循环和条件生成东西。想象一下，你有100个圆圈要显示，你会重复100行代码100次吗？你真的会复制粘贴10.000行代码吗？此外，每个('#circlesdiv1')都是对DOM的调用，这需要进行一次并缓存。

这是一个快速解决你的问题，它并不完美，但随意适应它。

它是可配置的，你可以生成你想要的任意数量的圆作为比例，它就像10行代码。

@Future downvoters，至少请说你为什么要投票。

/*------ CONFIGURATION -----*/
var accuracy1 = 20
var maxCircles = 5
/* -------------------------*/


var $circlesdiv1 = $('#circlesdiv1')
var filledCircles = parseInt(accuracy1/(100/maxCircles))

// Building empty circles
for(i=0; i<maxCircles; i++)
	$circlesdiv1.append('<div class="accuracyCircle"></div>')

// Filling requested number of circles, adding classes
for(i=0; i<=filledCircles; i++)
	$circlesdiv1
		.find(".accuracyCircle:nth-child("+(i+1)+")")
		.addClass("filled accuracycircle"+(filledCircles+1))

div#circlesdiv1 {
  height: 20px;
  width: 300px;
}
div.accuracyCircle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: #008000 solid 1px;
}
div.accuracyCircle.filled {
  background: #008000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circlesdiv1"></div>

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

2 个答案: