addClass（）不能正常工作

好吧，所以我不知道到底发生了什么，我试图让一串文本看起来像是用光标闪烁来突出显示。就像当您点击浏览器搜索栏中的文本并看到它每秒闪烁一次。addClass（）不能正常工作

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秒设置一次，所以它不会让你恼火）。

来源

2015-11-27 Matthew Smart

也许使用if（）{} ** **其他（）{} ... –

你永远不删除类'blink'所以第一个条件是始终亦真亦幻 –

你的代码的逻辑有点混乱。所以其实混乱，我甚至不能确定它的点的时候，您可以用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

来源

2015-11-27 10:39:15

我也会改变css .blinkOff {border-left：1px solid rgba（0，0，0，0）;}，这样每次都不会移动整行。 –

@AndrewBone刚刚更新了:) –

您添加类blinkOff那么你马上看到测试它是否具有blinkOff类，如果它（和它总是不会因为你添加的话），那么你再次移除它。

您需要从改变你的代码：

if() { } 
if() { }

到

if() { } 
else { }

或至少

if() { } 
else if() { }

来源

2015-11-27 10:43:30 Quentin

事实上，OP永远不会删除类'眨眼'，他的逻辑真的是失败。我仍然没有阅读 - 一遍又一遍地重读问题 –

-1

Rory的解决方案是正确的。您可以通过修改现有代码

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

Updated Fiddle

来源

2015-11-27 10:44:55 Samir

为什么要投票？请张贴原因。 – Samir

在你的情况，如果第二不久后运行第一如果它去除第一添加类。根据您的要求，应该是这样的：

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

来源

2015-11-27 10:45:14

想一想您的逻辑。看看这个：

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/

来源

2015-11-27 10:46:43

从外观上来看，如果更换第二，如果有其他人应该很好地工作。否则，无论是 '如果' 将每次运行

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

来源

2015-11-27 10:49:41 SKaul

addClass（）不能正常工作

回答

相关问题