Question

我正在使用Jquery一次显示1条消息，每10秒显示3条可能的消息：

HTML：

            <div class="mszDivOuter">
              <div class="mszDiv activeMsz">message 1</div>
              <div class="mszDiv deactiveMsz">message 2</div>
              <div class="mszDiv deactiveMsz">message 3</div>
            </div>

使用Javascript：

    jQuery(document).ready(function(){

        setInterval(function(){ 
            jQuery(".mszDivOuter").each(function(){
                var cnt = crActiveMsz = nextMszNum = 0; 
                cnt = $(this).children('.mszDiv').length;
                if(cnt > 1){
                    crActiveMsz = $(this).children('.activeMsz').index();
                    nextMszNum = crActiveMsz + 2;

                    if(nextMszNum > cnt){ nextMszNum = 1;}

                    $(this).children('.mszDiv').removeClass("activeMsz");
                    $(this).children('.mszDiv').addClass("deactiveMsz");

                    $(this).children('.mszDiv:nth-child('+nextMszNum+')').removeClass("deactiveMsz");
                    $(this).children('.mszDiv:nth-child('+nextMszNum+')').addClass("activeMsz");
                }
            });
        }, 10000);
    });

但是，有时我不想使用特定的消息，例如，使用PHP我可以将消息1视为根本不显示，如下所示：

HTML：

            <div class="mszDivOuter">
            <?php if ($condition==true) { ?>
              <div class="mszDiv activeMsz">message 1</div>
            <?php } else { } ?> 
              <div class="mszDiv deactiveMsz">message 2</div>
              <div class="mszDiv deactiveMsz">message 3</div>
            </div>

但在这种情况下，当页面加载时，消息DIV将在前10秒内保持空白，然后才会开始在消息2和3之间切换。

是否有智能，通用的方法来避免这段等待时间，并立即显示消息2？（或者消息3，如果我也将使用PHP禁用消息2）。

CSS：

.mszDiv{ position:absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -0-transform: translateY(-50%); top:50%; -ms-transform: translateY(-50%); top:50%;}
 .activeMsz{ opacity:1;
 -webkit-animation: slide-down 1s linear ;
    -moz-animation: slide-down 1s linear ;
    -o-animation: slide-down 1s linear ;
    -ms-animation: slide-down 1s linear ;
    animation: slide-down 1s linear ;
 }
 .deactiveMsz{ opacity:0;}

Answer 1

从setInterval中取出匿名函数并命名为：

function switchMsg() {
    jQuery(".mszDivOuter").each(function(){
        var cnt = crActiveMsz = nextMszNum = 0; 
        cnt = $(this).children('.mszDiv').length;
        if(cnt > 1){
            crActiveMsz = $(this).children('.activeMsz').index();
            nextMszNum = crActiveMsz + 2;

            if(nextMszNum > cnt){ nextMszNum = 1;}

            $(this).children('.mszDiv').removeClass("activeMsz");
            $(this).children('.mszDiv').addClass("deactiveMsz");

            $(this).children('.mszDiv:nth-child('+nextMszNum+')').removeClass("deactiveMsz");
            $(this).children('.mszDiv:nth-child('+nextMszNum+')').addClass("activeMsz");
        }
    });
}

在准备好文档中，调用该函数，然后设置间隔：

jQuery(document).ready(function(){
  switchMsg();
  setInterval(switchMsg, 10000);
});

如果HTML元素不存在，则在0秒后使用.addClass，而不是10

1 个答案: