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（）不能正常工作

回答

相關問題