Question

我有一个CSS选框，显示数据库中的值。在x分钟后，它会刷新并提取新数据。颜色根据其数值而变化（如果x <50000使其变红......等等）。

我的问题是，一旦我的setInterval运行，数据就会更新，但颜色类不会被添加。知道为什么吗？我看到了这个post并将我的删除/添加类更改为切换但是同样的问题，在初始运行后没有调用切换。

的Javascript

$(document).ready(function () {
    setColors();
    setInterval(function () { 
        $('.marquee').addClass("paused"); 
        $('.marquee').load('/Home/GetMarquee'); 
        setColors(); 
        $('.marquee').removeClass("paused"); 
    }, 30000);
});

function setColors() {
    $('.totalSales').each(function () {

        var final = $(this).text();

        //removes all the pervious classes
        $(this).removeClass('ok');
        $(this).removeClass('down');
        $(this).removeClass('up');

        if (final > 100000) {
            $(this).addClass('up');
        } else if (final < 50000) {
            $(this).addClass('down');
        } else {
            $(this).addClass('ok');
        }
    });
}

Razor HTML

<div class="marquee">
    <span>
        @for (var i = 0; i < Model.tickerData.Count(); i++)
        {
            <span class="totalSales">
                @Html.DisplayFor(x => x.tickerData[i].GroupName): @Html.DisplayFor(x => x.tickerData[i].Sales).....
            </span>
        }        
    </span>
</div>

CSS颜色

.down {
    color:#AB2218;
}
.up {
    color: #4F692A;
}
.ok {
     color:#FABF03;
}

CSS Marquee

.marquee {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color:black;
    border: 1px black solid;
    font-size:50px;

    -webkit-animation: marquee 30s linear infinite alternate;
        animation: marquee 30s linear infinite;
}
.paused {
    animation-play-state: paused;
}

.marquee span {
    display: inline-block;
    text-indent: 0;
}


/* Make it move */
@keyframes marquee {
    0%   { text-indent: 17.5em }
    100% { text-indent: -57.5em }
}
@-webkit-keyframes marquee{
    0%   { text-indent: 17.5em }
    100% { text-indent: -57.5em }
}

Answer 1

.load是一个异步的ajax函数，因此它在完成之前不会阻塞，并且类的添加和删除发生得太快而无法通知。尝试使用.load回调：

setInterval(function () { 
    $('.marquee').addClass("paused"); 
    $('.marquee').load('/Home/GetMarquee', function() { 
        setColors(); 
        $('.marquee').removeClass("paused");
    }); 
}, 30000);

setInterval没有添加.addClass

1 个答案: