这个简单的javascript代码怎么了？
[英]What's wrong with this simple javascript code?
问题描述
我需要从此链接http://jsfiddle.net/bQfb6/2/编译代码
JavaScript似乎有问题。 文字颜色不变。
我的html文件：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.cell1 {
border:1px solid red;
background:#eee;
padding:10px;
}
</style>
<script type="text/javascript">
$('.cell1').each(function (i, n) {
if ($(n).text() < 5) $(n).css('color', 'green');
});
</script>
</head>
<body>
<table>
<tr>
<td class="cell1">20</td>
<td class="cell1">5</td>
<td class="cell1">1</td>
<td class="cell1">3</td>
<td class="cell1">10</td>
<td class="cell1">15</td>
</tr>
</table>
</body>
</html>
ps对不起，这样的菜鸟问题，我真的需要您的帮助才能继续
4 个解决方案
解决方案1
3 已采纳 2014-09-10 12:19:22
首先，您需要在已经构建DOM时运行代码； 就目前情况而言，它是在此之前被调用的，因此.cell1选择器找不到任何元素。
其次，代码本身可以简化（无需使用.each ，足以为css设置回调），如下所示：
$(function() {
$('.cell1').css('color', function(_, val) {
return this.textContent < 5 ? 'green' : val;
});
});
解决方案2
2 2014-09-10 12:15:59
您需要将代码包装在ready处理程序中：
$(document).ready(function(){
// your code here
});
而且，您的操作方式有误，请执行以下操作：
$(document).ready(function(){
$('.cell1').each(function (i, n) {
if (+($(n).text())< 5){ // + is used to convert into number
$(this).css('color', 'red');
}
});
});
解决方案3
0 2014-09-10 12:19:00
您必须等到所有DOM结构准备就绪，然后再应用您的jquery脚本。 您可以将代码包装在$(document).ready(function(){}); 或$(function(){});
$(function(){
$('.cell1').each(function(i, n) {
if($(n).text() < 5) $(n).css('color', 'green');
});
});
解决方案4
0 2014-09-10 12:19:03
另外一项更改，您必须使用parseFloat进行数值比较
if(parseFloat($(n).text()) < 5)
这个简单的Javascript有什么问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.