Question

编译代码

看起来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>

P.S。很抱歉这样一个noob问题，我真的需要你的帮助继续前进

Answer 1

首先，在构建DOM时，您需要运行代码;就像现在一样，它在此之前被调用，因此.cell1选择器找不到任何元素。

其次，代码本身可以简化（无需使用.each，这足以为css设置回调），如下所示：

$(function() {
  $('.cell1').css('color', function(_, val) {
    return this.textContent < 5 ? 'green' : val;
  });
});

Demo

Answer 2

您需要将代码包装在ready handler中：

$(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');
   }
});
});

demo

Answer 3

您必须等待所有DOM结构准备就绪，然后应用您的jquery脚本。您可以将代码包装在$(document).ready(function(){});或$(function(){});

中

$(function(){
  $('.cell1').each(function(i, n) {
     if($(n).text() < 5) $(n).css('color', 'green');
  });
});

<强> Demo

Answer 4

还有一个更改，你必须使用parseFloat进行数字comperison

if(parseFloat($(n).text()) < 5)

这个简单的JavaScript代码有什么问题？

4 个答案: