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

Question

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

在我的发言中，我说我希望百分比范围以各自的颜色显示条形，并且宽度对应于该百分比。

问题出现在最后的其他声明中，当我说如果得分正好是100并且如果得分的父级具有“.report”类，则将条纹颜色为灰色。尝试了我能想到的一切，它要么不起作用，要么完全破坏剧本。

仍然是JQuery / Javascript的新手，但我觉得我很喜欢......直到我被这样的卡住了。显然我在这里缺少一些基本的东西 - 可能在js的parent（）部分，我仍然不稳定，但究竟出了什么问题？

在我看来，这里所有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在比较它们之前将参数转换为相同类型，或者您可以将分数转换为整数score = parseInt(score)在你的一系列if测试之前。

注意：如果您没有为父级定义.report报告类，那么如果您希望得分为100的栏为绿色，则无需更改{{1}而是移动它，所以这是系列中的最后一次测试。

Answer 2

你有一些问题。

1. 最后一个elseif语句永远不会被命中。如果得分= 100，则将在此子句中捕获：../Resources/config'

将最后一个elseif移到此值之上或将此值更改为else if (score <= 100 && score >= 95){。我的猜测是在这个更有意义之前移动它，因为你有一个额外的测试需要是真的score < 100

1. score.parent().hasClass( '.report' )是一个字符串。因此，使用===运算符将其与100进行比较将永远不会成立。

使用parseInt将其更改为==或将score变量更改为整数。 score

1. score = parseInt(score, 10)是一个字符串。所以它没有父母。 score将返回null（或未定义）。

我认为你想要的是score.parent()

Answer 3

将（得分＆lt; = 100＆amp;＆amp;得分> = 95）改为（得分＆lt; 100＆amp;＆amp;得分＆gt; = 95）。

目前它永远不会达到这个条件（得分=== 100）因为得分为100（得分<= 100＆amp;＆amp;得分> = 95）

Answer 4

有两个问题：

• 您在第二个<= 100中检查了if，因此最后一个永远不匹配，
• 你在最后一次检查中使用=== 100，这需要score为int，而不是（它是一个字符串）。

更新1

分数100的最终检查现在将背景颜色设置为绿色， 除非父母有report类。对此的测试是：

score.parent().hasClass( '.report')

有2个问题：score是一个整数，.report不是类名（但report是）; .report是类report的CSS选择器。

$( 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 ) {
        if ( $(this).parent().hasClass( 'report' ) )
		  $( bar ).css( 'background-color', 'rgba(0, 0, 0, .5)' );
        else
          $( bar ).css( 'background-color', 'rgba( 53, 182, 103, .5)' );
	}
	});
});

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 report"><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>

更新2

根据上下文使用不同颜色的另一种方法是使用类名而不是在JavaScript中对颜色值进行编码。

为此，我使用了4个类名：top表示100％，veryhigh表示95 +，high表示80+，medium表示60+，并且CSS定义它们的颜色。 这也允许我们在没有任何JS代码的情况下轻松覆盖top - 类progbar中的report颜色。

$( 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){
		$( this ).parent().addClass( 'veryhigh' );
		//console.log(parent);
	} else if (score <= 94 && score >= 80){
        $( this ).parent().addClass( 'high' );
	} else if (score <= 79 && score >= 60){
        $( this ).parent().addClass( 'medium' );
	} else if (score < 60){
        $( this ).parent().addClass( 'low' );		
	} else if ( score == 100 ) {
        $( this ).parent().addClass( 'top' );
	}
	});
});

th{
    text-align:left;
}

.progbar.top.report {
  background-color: rgba( 0, 0, 0, .5);
}

.progbar.veryhigh, .progbar.top {
  background-color: rgba( 53, 182, 103, .5);
}

.progbar.high {
  background-color: rgba( 24, 133, 157, .5);
}

.progbar.medium {
  background-color: rgba( 239, 149, 33, .5);
}

.progbar.low {
  background-color:rgba( 198, 32, 55, .5);
}

<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 report"><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>