0

假设我有一个 Ajax 函数，它每 5 秒显示一次新数据。现在，每当推送（显示）新数据时，我都想更改该特定值的 css (class="av") 颜色。ajax 当前显示 5 行，但我只想更改该更改值的颜色。我怎么做？非常感谢

我的代码：

    <script type="text/javascript">

            $(document).ready(function(){

                //function to get data from database
                function getRealData(){
                    $.ajax({ 
                    url: 'test_api.php', 
                    data: "", dataType: 'json', 
                    success: function(rows) { 

                    var text = '';

                        for (var i in rows) { 

                            var row = rows[i]; 

                            var availability = row[3]; 

                            var hostName = row[2];

                            var intranet = row[6];

                            var timeRespons = row[4]; 


                            text += "<div class='box'><b>availability: </b><span class='av'>"+availability+"</span><b> hostName: </b>"+hostName+
                            "<b> intranet: </b>"+intranet+"<b> timeResponse: </b>"+timeRespons;
                            text += '<br/ ></div>';


                        }
                        $("#content").html(text);                                       
                    }
                });
                }

                //this refreshes data every 2seconds
                setInterval(getRealData, 5000);

                //call the function to display data
                getRealData();

                //notification
                function notify(){


                var avValue = $(".av").html();

            console.log(avValue);

            if(avValue == 1){
                $(".av").css({"color":"red"});
            }
        }


        setInterval(notify, 2000);

        notify();

});

</script>

编辑：（这是输出，需要更改 1 的颜色）

availability: 1 hostName: aaa intranet: vvvvv timeResponse:0.144
availability: 0 hostName: zzz intranet: rrrrr timeResponse:0.028
availability: 1 hostName: qqq intranet: eeeee timeResponse:0.160
availability: 0 hostName: eee intranet: qqqqq timeResponse:0.116
availability: 0 hostName: ttt intranet: wwwww timeResponse:0.046
availability: 0 hostName: uuu intranet: kkkkk timeResponse:0.116

我还想在 avValue == 1 时向 .box 添加一个新类，然后基于该类是否存在做某事。但这也不起作用。这很奇怪。这可能与异步或缓存ajax有关吗？

4

2 回答 2

1

这里不需要两个定时器，你可以在.av构建时设置跨度的样式。我会添加一个名为的新 CSS 类avHighlight，然后在构建 HTML 时，测试是否availability为 1。如果是，则添加新avHighlight类。

如果这样做，您可以删除该notify()功能及其关联的计时器。

css

.avHighlight {
    color: red
}

Javascript

text += '<div class="box"><b>availability: </b>
    <span class="av ' + (availability == 1 ? 'avHighlight' : '') + '">'+availability+'</span>' + 
    '<b> hostName: </b>'+hostName+ '<b> intranet: </b>'+intranet+'<b> timeResponse:</b>'+timeRespons;
text += '<br/ ></div>';
于 2013-07-12T14:21:00.860 回答
0

如果你的 HTML 是这样的：

<div id="content">
    <div class="av">Ajax Content</div>
    <div class="av">Ajax Content</div>
    <div class="av">Ajax Content</div>
    <div class="av">Ajax Content</div>
    <div class="av">Ajax Content</div>
    <div class="av">Ajax Content</div>
</div>

在 CSS 中你可以这样做：

.av:first-child {
    background-color: red;
}

这样，第一个项目（你最后带来的那个）将永远是红色的。你不需要任何花哨的 JS 来做到这一点。如果从底部带入物品，您所要做的就是使用:last-child

编辑：

如果您一次添加多行，则可以使用:lt()选择器。它的工作原理是您一次输入要添加的项目数量，它将选择小于该数量的所有元素。基本上，如果我放 5，它将选择前 5 个项目（零索引）。

例子：

$("#content > .av:lt(5)").css("color", "red");

您不必输入硬编码的数字 5。您可以使用变量（即i++）计数，然后使用:lt("i");

于 2013-07-12T14:23:44.997 回答