使用一个if else语句在不同的上下文中对进度条进行着色

Question

我有一些简单的滚动进度条，由页面上的百分比数字提供(稍后这将来自一个数据库)，它根据这个数字改变颜色和宽度。使它们在一个上下文中运行良好，但在另一个页面上，它们需要使用不同的颜色。我想对这两种代码都使用相同的代码，但我无法让它工作。

在我的声明中，我想要百分比范围以各自的颜色和与该百分比相对应的宽度显示条形图。

麻烦出现在最后一条color语句中，当我说，如果分数正好是100，如果分数的父级有“..report”类，则将条形图涂成灰色。尝试了我所能想到的一切，它要么不起作用，要么把脚本完全炸掉。

仍然是一个新鲜的JQuery/Javascript，但我想我喜欢它..。直到我被困在这样的地方。显然，我在这里遗漏了一些基本的东西--可能是在js的父()部分，我仍然对此犹豫不决，但是到底出了什么问题呢？

在我看来，这里100%的酒吧都应该是灰色的。

​

$( document ).ready(function(){
	
	$( '.score' ).each( function() {
        //get each score and apply width to progress bar
    var score = $( this ).text().trim();
		$( this ).closest( '.progbar' ).css('width', score + '%');
		
	var bar = $( this ).closest( '.progbar' );
	//apply colors to bar based on performance or progress
	var parent = $( '.score' ).closest( 'progbar' );
	
	if (score == 0){
		$( bar ).css('width', '0');
	} else if (score <= 100 && score >= 95){
		$( bar ).css( 'background-color', 'rgba( 53, 182, 103, .5)' );
		//console.log(parent);
	} else if (score <= 94 && score >= 80){
		$( bar ).css( 'background-color', 'rgba( 24, 133, 157, .5)' );
		//console.log(score);
	} else if (score <= 79 && score >= 60){
		$( bar ).css( 'background-color', 'rgba( 239, 149, 33, .5)' );
	} else if (score < 60){
		$( bar ).css( 'background-color', 'rgba( 198, 32, 55, .5)' );
	} else if ( score === 100 && score.parent().hasClass( '.report' ) ){//this is where it falls apart
		$( bar ).css( 'background-color', 'rgba(0, 0, 0, .5)' );
		alert('hasClass');
	}
	});
});

th{
    text-align:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="report-table1 math">
                <!--<caption>
          Level 1 Reading to Common Core Standards
          </caption>-->
                
                <col>
                <col>
                <tr class="tabletop">
                  <th scope="col"><div>Standards in Strand </div></th>
                  <th scope="col"><div>Progress</div></th>
                </tr>
                <tr>
                  <th colspan="2" class="name sub2"><div>Common Core</div></th>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.A.1</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">100</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.A.2</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar"><span class="score">100</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.A.3</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">99</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.B.4</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">98</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.B.4.A</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">0</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.B.4.B</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">10</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.B.4.C</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">86</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.B.5</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">83</span>%</div>
                    </div></td>
                </tr>
                <tr>
                  <th class="name tooltip"><div>• CCSS.MATH.CONTENT.K.CC.C.6</div></th>
                  <td class="report-table1 reading"><div class="progbar-wrap">
                      <div class="progbar report"><span class="score">70</span>%</div>
                    </div></td>
                </tr>
              </table>

​

这里有一把小提琴：

http://jsfiddle.net/halfacre/08Lm3hvf/

Answer 1

更改(另见我的答案结尾处的注释)：

} else if (score <= 100 && score >= 95) {

至：

} else if (score < 100 && score >= 95) {

和：

} else if (score === 100 && score.parent().hasClass( '.report' ))

至：

} else if (score == 100 && $(this).parent().hasClass( 'report' ))

如果我用你的小提琴做这些改变，我就能得到100%的灰条。第一个更改防止score <= 100条件捕获100的值，第二个更改允许JS在比较它们之前将参数转换为相同的类型，或者在进行一系列if测试之前，您可以将分数转换为整数score = parseInt(score)。

备注：，如果您希望100分的条形图是绿色的，如果没有针对父类定义.report报表类，那么您不需要更改} else if (score <= 100 && score >= 95) {，而是移动它，这是本系列的最后一次测试。

Answer 2

你有一些问题。

1. 最后的那句话永远不会被击中。如果得分= 100，则将在以下子句中捕获：else if (score <= 100 && score >= 95){

要么将最后一个移到上面，要么将这个移动到score < 100。我的猜测是在此之前移动它更有意义，因为您有一个额外的测试，需要是真正的score.parent().hasClass( '.report' )。

1. score是一个字符串。因此，将其与使用===运算符的100进行比较永远不会是真的。

要么将其更改为==，要么使用parseInt将得分变量更改为整数。score = parseInt(score, 10)

1. score是一个字符串。所以它没有父母。score.parent()将返回null (或未定义)。

我觉得你想要的是$( this ).parent()

Answer 3

将(得分<= 100和分数>= 95)改为(分数< 100 &得分>= 95)。

目前，它从来没有达到这个条件(得分=== 100 )，因为100分被捕捉到(得分<= 100 &得分>= 95)。