如何在倒数计时器为零时更改jquery中的类

时间:2016-01-13 04:55:46

标签: javascript jquery twitter-bootstrap-3

在bootstrap中我使用了一个jquery倒计时插件,当时间等于00周00天00:00:00时,我需要将我的类从label-default更改为lable-danger

<!--this element class i want to change--> 

<span id="sp-dt-<?php echo $row['id']; ?>" class="label label-default"></span>

<!--This is my countdown plugin-->
<script type="text/javascript">  
     $('#sp-dt-<?php echo $row["id"]; ?>').countdown('<?php echo $expDate; ?>', function(event) {$(this).html(event.strftime('%w weeks %d days %H:%M:%S'));
 });

Screenshot

正如你在00周00天00:00:00的时候看到的那样,我想把类别从label-dafault更改为label-danger

注意:

  • 我使用了getElementById但倒计时的jquery文件 jquery CDN存在冲突,因此会出现“未捕获的错误”。
  • 我也尝试使用$('#sp-dt-<?php echo $row["id"]; ?>').val() = 00 weeks 00 days 00:00:00,但它无效

2 个答案:

答案 0 :(得分:1)

您可以尝试以下代码

$('#sp-dt-<?php echo $row["id"]; ?>').countdown('<?php echo $expDate; ?>', function(event) 
    {
        $(this).html(event.strftime('%w weeks %d days %H:%M:%S'));
        //if remaining days are less then 4 weeks = 7*4 = 28 days
        if (event.strftime('%D') <= 28 && event.strftime('%m') == 0 && event.strftime('%Y') == 0) {
                  $(this).addClass("four-weeks-remaining");
            }
    }).on('finish.countdown', function() {
           $(this).addClass("new-class");
    });

答案 1 :(得分:0)

您可以将此javascript添加到您的页面:

<script type="text/javascript">
    $(function(){

        $('.label-default').each(function(){
            if ( $(this).text() == '00 weeks 00 days 00:00:00'){
                $(this).addClass('label-danger').removeClass('label-default');
            }
        });

    }); //END document.ready
</script>

jsFiddle Demo