Question

我写了一个if语句，说明数字是否为＆lt; 50背景颜色为红色。如果数字是51-74，它是橙色，如果是75或更高，它是绿色。但是颜色并没有根据价值而变化，我不知道为什么。这是网站的实际应用：http://www.andrewhnovak.com/test/index.html 这是代码 HTML

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Site Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/header.css" rel="stylesheet" type="text/css">
    <link href="css/mainPage.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <div class="row">

        </div>
    </div><!--
</div>


</div>

</div>
-->

    <div class="container">
        <div class='underHeader'></div>
    </div>

    <div class="container">
        <div class='whiteBox'>
            <div class='newProducts'></div>
            <div id="frontPage">
        <table class="table table-bordered" id="tablehere">
    <thead>


        <tr>



        </tr>
        <tr>
          <th data-field="id">item<div id="Row1Rating">62</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row2Rating">55</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row3Rating">77</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row4Rating">66</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row5Rating">88</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row6Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row7Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row8Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row9Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row10Rating">22</div></th>


        </tr>
   <tr>
      <div id="link"><a href="#">Test showing app.js is connected</a></div>

        </tr>

    </thead>

</table>
    </div>
</div>

    </div>

      <footer></footer>

    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <!--<script src="js/jquery.easing-1.3.js"></script>-->
    <script src="js/bootstrap.js"></script> <script src="js/menu.js"></script>
     <script src="js/app.js" type="text/javascript"></script>


</body>
</html>

JS

   $(document).ready(function () { 

    $('#link').click(function(e) {
    e.preventDefault();// prevent the default anchor functionality
    $('#frontPage').hide();

frontPageRatings();


});


function frontPageRatings(){

    var rowValue1 = document.getElementByID("Row1Rating");
    var Value1 = parseInt(rowValue1.innerHTML);

    var rowValue2 = document.getElementByID("Row2Rating");
    var Value2 = parseInt(rowValue2.innerHTML);

    var rowValue3= document.getElementByID("Row3Rating");
    var Value3 = parseInt(rowValue3.innerHTML);

    var rowValue4 = document.getElementByID("Row4Rating");
    var Value4 = parseInt(rowValue4.innerHTML);

    var rowValue5 = document.getElementByID("Row5Rating");
    var Value5 = parseInt(rowValue5.innerHTML);

    var rowValue6 = document.getElementByID("Row6Rating");
    var Value6 = parseInt(rowValue6.innerHTML);

    var rowValue7 = document.getElementByID("Row7Rating");
    var Value7 = parseInt(rowValue7.innerHTML);

    var rowValue8 = document.getElementByID("Row8Rating");
    var Value8 = parseInt(rowValue7.innerHTML);

    var rowValue9 = document.getElementByID("Row9Rating");
    var Value9 = parseInt(rowValue7.innerHTML);

    var rowValue10 = document.getElementByID("Row10Rating");
    var Value10 = parseInt(rowValue7.innerHTML);




    if(Value1<50){
        rowValue1.style.backgroundColor = '#900000';
        }
        else if(Value1 >49 && Value1 <75){
        rowValue1.style.backgroundColor = '#FF9933';
        }
        else if(Value1>74){
        rowValue1.style.backgroundColor = '#00CC00';
        }

            if(Value2<50){
        rowValue2.style.backgroundColor = '#900000';
        }
        else if(Value2 >49 && Value2 <75){
        rowValue2.style.backgroundColor = '#FF9933';
        }
        else if(Value2>74){
        rowValue2.style.backgroundColor = '#00CC00';
        }

            if(Value3<50){
        rowValue3.style.backgroundColor = '#900000';
        }
        else if(Value3 >49 && Value3 <75){
        rowValue3.style.backgroundColor = '#FF9933';
        }
        else if(Value3>74){
        rowValue3.style.backgroundColor = '#00CC00';
        }

            if(Value4<50){
        rowValue4.style.backgroundColor = '#900000';
        }
        else if(Value4 >49 && Value4 <75){
        rowValue4.style.backgroundColor = '#FF9933';
        }
        else if(Value4>74){
        rowValue4.style.backgroundColor = '#00CC00';
        }

            if(Value5<50){
        rowValue5.style.backgroundColor = '#900000';
        }
        else if(Value5 >49 && Value5 <75){
        rowValue5.style.backgroundColor = '#FF9933';
        }
        else if(Value5>74){
        rowValue5.style.backgroundColor = '#00CC00';
        }

            if(Value6<50){
        rowValue6.style.backgroundColor = '#900000';
        }
        else if(Value6 >49 && Value6 <75){
        rowValue6.style.backgroundColor = '#FF9933';
        }
        else if(Value6>74){
        rowValue6.style.backgroundColor = '#00CC00';
        }

            if(Value7<50){
        rowValue7.style.backgroundColor = '#900000';
        }
        else if(Value7 >49 && Value7 <75){
        rowValue7.style.backgroundColor = '#FF9933';
        }
        else if(Value7>74){
        rowValue7.style.backgroundColor = '#00CC00';
        }



    }

});

Answer 1

您可以通过向要根据值着色的每个元素添加相同的类（例如评级）来大幅简化代码。

然后在jQuery中，您可以查询具有类评级的所有元素，并对它们进行交互。

您的javascript将看起来像这样：

jQuery(document).ready(function ($) { 
    $('.rating').each(function(i, el) {
        var value = parseInt($(el).html(), 10);
        var color = getColor( value );
        $(el).css('background', color);
    });

    function getColor( value ) {
        var color = '#00CC00'; // value bigger than 74
        if(value < 50){
            color = '#900000';
        } else if(value > 49 && value < 75){
            color = '#FF9933';
        }  
        return color;
    }
});

工作示例： http://jsfiddle.net/5yrdgj7h/1/

Answer 2

您应该将所有div元素更改为使用id属性而不是class属性，然后使用getElementById来访问这些元素。例如：

<th data-field="id">item<div id="Row2Rating">55</div></th>

然后在javascript中：

var rowValue2 = document.getElementById("Row2Rating");

一个类用于描述一组相似的元素，以相同的方式对它们进行样式化，并使用getElementsByClassName来定位共享该类的所有元素。 id应该是唯一标识符，并使用getElementById来选择该唯一元素。

Answer 3

使用此

不必为简单的功能写很多，
我修改了代码并大幅减少了。

$(document).ready(function () {
    $('#link').click(function(e) {
        e.preventDefault();// prevent the default anchor functionality
        $('#frontPage').hide();
        frontPageRatings();
    });
function frontPageRatings(){
    function getFirstCLS(elem){
        return document.getElementsByClassName(elem)[0];
    }
    function getHTML(CLASS){
        return parseInt(getFirstCLS(CLASS).innerHTML, 10);
    }
    function setCOLOR(CLASS, color){
        getFirstCLS(CLASS).style.backgroundColor = color;
    }
    function ifELSE(elem){
        if(getHTML(elem)<50){
            setCOLOR(elem, '#900000');
        } else if(getHTML(elem) >49 && getHTML(elem) <75){
            setCOLOR(elem, '#FF9933');
        } else if(getHTML(elem)>74){
            setCOLOR(elem, '#00CC00');
        }
    }
    ifELSE("Row1Rating");
    ifELSE("Row2Rating");
    ifELSE("Row3Rating");
    ifELSE("Row4Rating");
    ifELSE("Row5Rating");
    ifELSE("Row6Rating");
    ifELSE("Row7Rating");
    ifELSE("Row8Rating");
    ifELSE("Row9Rating");
    ifELSE("Row10Rating");
    }
});

颜色根据列出的问题数量而变化

3 个答案:

使用此