jQuery 不会更新 td 背景颜色 - 包含代码

Question

我使用 jQuery/AJAX 每 10 秒更新一次表格。有时背景颜色的设置会改变，我需要更新背景颜色。我的代码按应有的方式更改了 HTML，但 td 仍未使用新的背景颜色进行更新。

<table border="1" style = "text-align:center; width:80%" align="center">
    <tr>                
        <td id = "{{item.id}}"  
            style = "background-color:{{item.bgColor.bgColor}}; width:10%">
            <a  id = "{{item.id}}/" class = "bgColor" 
                href="{{item.bgColor.id}}/">
                <span id = "{{item.id}}" class = "bgColor">
                    {{item.bgColor}}
                </span>
            </a>
        </td>
    </tr>
</table>

<script>
var loadTime = Date.now();

function updatePage() 
{   
    $.post(postURL, function(results) 
    {
        for (var loop in results)
        {
            var data = results[loop],
                colorData = $("td#" + data.id),
                colorCell = $("span#" + data.id + ".bgColor"),
                colorLink = $("a#" + data.id + ".bgColor");             

            colorData.css("backgroundColor", data.bgColor.bgColor)
            colorCell.text(data.bgColor.bgColor)
            }
    }, "json");     
    loadTime = Date.now();          
}

var myVar = setInterval( function() {updatePage()}, 10000);
</script>

这是更新前 HTML 的相关部分:

<td id = "6"  
    style = "background-color:LightGray; width:10%">
    <a  id = "6" class = "bgColor" 
        href="6/">
        <span id = "6" class = "bgColor">
            LightGray
        </span>
    </a>
</td>

这是更新后 HTML 的相关部分:

<td id = "6"  
    style = "background-color:Red; width:10%">
    <a  id = "6" class = "bgColor" 
        href="6/">
        <span id = "6" class = "bgColor">
            Red
        </span>
    </a>
</td>

样式更新正确但背景颜色没有改变。 没有与 td 标签关联的外部样式表。

Answer 1

我通过对一些东西进行硬编码来调整你在 JSFiddle 上的代码并让它工作。如果您说 HTML 正在正确更新，那么我会假设它会正常工作。您可能需要将您的代码与我的代码进行比较，看看有什么不同。

在这里试一试:https://jsfiddle.net/mgfqy9ks/3/

<table border="1" style = "text-align:center; width:80%" align="center">
        <tr>                
            <td id = "6"  
                style = "background-color:blue; width:10%">
                <a  id = "6/" class = "bgColor" 
                    href="6/">
                    <span id = "6" class = "bgColor" style='color:white;'>
                        Blue
                    </span>
                </a>
            </td>
            <td id = "7"  
                style = "background-color:blue; width:10%">
                <a  id = "7/" class = "bgColor" 
                    href="7/">
                    <span id = "7" class = "bgColor" style='color:white;'>
                        Blue
                    </span>
                </a>
            </td>
        </tr>
    </table>
    <button onclick='updatePage();'>Update</button>

    <script>
        function updatePage() 
    {   
        var results = [{id:6,bgColor:{bgColor:'Orange'}},{id:7,bgColor:{bgColor:'Red'}}];
        for(loop in results){
            var data = results[loop],
                colorData = $("td#" + data.id),
                colorCell = $("span#" + data.id + ".bgColor"),
                colorLink = $("a#" + data.id + ".bgColor");             

            colorData.css("backgroundColor", data.bgColor.bgColor);
            colorCell.text(data.bgColor.bgColor);
        }
    }
    </script>

在开发人员工具中检查您的控制台，看它是否抛出任何错误。