我写了一个 if 语句，表示如果数字 < 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';
}
}
});
最佳答案
您可以通过向要根据值着色的每个元素添加相同的类(例如评级)来极大地简化代码。
然后在 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;
}
});
关于javascript - 颜色根据列出的数字发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28421128/