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

Question

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

在我的声明中，我是说我希望百分比范围以各自的颜色和与该百分比对应的宽度显示条形。

问题出现在最后一个 else 语句中，当我说如果分数恰好是 100 并且如果分数的父级有 class '.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>

这是一个fiddle：

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

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

注意： 如果 .report 报告 class 未针对父级定义，如果您希望分数为 100 的条形图为绿色，那么您不需要更改 } else if (score <= 100 && score >= 95) { 而是移动它，因此它是该系列中的最后一个测试。

Answer 2

你有一些问题。

永远不会命中最后的 elseif 语句。如果 score = 100 那么它将被捕获在这个子句中：else if (score <= 100 && score >= 95){

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

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

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

score 是一个字符串。所以它没有parent。 score.parent() 将 return 为空（或未定义）。

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

Answer 3

将（分数 <= 100 && 分数 >= 95）更改为（分数 < 100 && 分数 >= 95）。

目前它永远不会达到条件 (score === 100) 因为 100 的分数被捕获在 (score <= 100 && score >= 95)

Answer 4

有 2 个问题：

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

更新 1

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

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

有两个问题：score 是整数，.report 不是 class 名称（但 report 是）； .report 是 class 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

根据上下文使用不同颜色的另一种方法是使用 class 名称而不是对 JavaScript.

中的颜色值进行硬编码

为此我使用了 4 个 class 名字：top 代表 100%，veryhigh 代表 95+，high 代表 80+ 和 medium 60+，并让 CSS 为他们定义颜色。这也使我们能够轻松覆盖 report-class progbar 中的 top 颜色，而无需任何 JS 代码。

$( 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>

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

Using one if else statement to color progress bars in different contexts

javascript

jquery

if-statement

parent