Question

好吧所以我不知道到底发生了什么，我试图让一串文字看起来像是用光标闪烁突出显示的。就像当你点击浏览器搜索栏中的文字并看到它每秒闪烁一样。

window.setInterval(function(){
if($('.cursorBlink').hasClass('blink')){
    $('.cursorBlink').addClass('blinkOff');
}


if($('.cursorBlink').hasClass('blinkOff')){
    $('.cursorBlink').removeClass('blinkOff').addClass('blink');
}
}, 1000);

因为你可以看到我设置了一个窗口setInterval，所以它每隔一秒就会删除并添加两个不同的类。一个有左边框，一个没有边框。所以这段代码不起作用，但奇怪的是如果我发出一个alert（）;在函数中，它使整个事情正常工作，这令人困惑。

请看我的jsfiddle，它在函数中有alert（），告诉你它是否正常工作（设置为每3秒，所以它不会让你烦恼）。

Fiddler

Answer 1

您的代码逻辑有点令人困惑。实际上令人困惑的是，当你使用toggleClass()进行一次通话时，我甚至不确定这一点：

window.setInterval(function () {
    $('.cursorBlink').toggleClass('blinkOff');
}, 3000);

Updated fiddle

另请注意，通过将边框颜色设置为透明而不是删除它，可以避免在删除类时发生的小跳转：

.blinkOff {
    border-left-color: transparent;
}

最后，这可以单独使用CSS完成，而不需要任何JS：

.blink {
    border-left: 1px solid white;
    animation: blinker 6s step-start infinite;
}
@keyframes blinker {  
  50% { border-left-color: transparent; }
}

Example fiddle

Answer 2

您添加了课程blinkOff，然后立即测试以查看它是否具有blinkOff课程，如果有，则始终因为你刚刚添加了它，然后你再次删除它。

您需要更改代码：

if () { }
if () { }

到

if () { }
else { }

或至少

if () { }
else if () { }

Answer 3

在你的情况下，第二个如果在第一个之后很快就会运行，它将删除第一个添加的类。根据你的要求，它应该是这样的：

window.setInterval(function(){
    if($('.cursorBlink').hasClass('blink')){
       $('.cursorBlink').removeClass('blink').addClass('blinkOff');
    }        
    else {
        $('.cursorBlink').removeClass('blinkOff').addClass('blink');
    }
  }, 1000);

Answer 4

更好地思考你的逻辑。看看这个：

window.setInterval(function(){
    if($('.cursorBlink').hasClass('blink')){
        $('.cursorBlink').addClass('blinkOff');
        $('.cursorBlink').removeClass('blink');

    }else{
        $('.cursorBlink').addClass('blink');
        $('.cursorBlink').removeClass('blinkOff');
    }
}, 3000);

https://jsfiddle.net/jsmhxkby/

Answer 5

从它的外观来看，如果用else替换第二个if它应该可以正常工作。否则，'if'将每次都运行

window.setInterval(function(){
    if($('.cursorBlink').hasClass('blink')){
        $('.cursorBlink').removeClass('blink').addClass('blinkOff');
    }
    else{
        $('.cursorBlink').removeClass('blinkOff').addClass('blink');
    }
}, 500);

Answer 6

罗里的解决方案是正确的。您可以将现有代码修改为

window.setInterval(function(){
    if($('.cursorBlink').hasClass('blinkOff')){
        $('.cursorBlink').removeClass('blinkOff').addClass('blink');
    }
    else {
        $('.cursorBlink').removeClass('blink').addClass('blinkOff');
    }
}, 3000);

Updated Fiddle

addClass（）不起作用

6 个答案: