addClass() is not working

Question

Хорошо, поэтому я не знаю точно, что происходит здесь, я пытаюсь сделать строку текста похожим на ее выделение с миганием курсора. Например, когда вы нажимаете на текст в строке поиска браузера и видите, что он мигает каждую секунду.

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


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

Таким образом, вы можете видеть, что я устанавливаю окно setInterval, поэтому каждую секунду он удаляет и добавляет два разных класса. Один с левой границей и один без. Так что этот код не работает, однако странно, если я поставлю предупреждение(); в функциях он делает все правильно, что путает.

См. Мой 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('blinkOff')){ 
     $('.cursorBlink').removeClass('blinkOff').addClass('blink'); 
    } 
    else { 
     $('.cursorBlink').removeClass('blink').addClass('blinkOff'); 
    } 
}, 3000); 

Updated Fiddle

Answer 4

В вашем случае второй, если запущен вскоре после того, как первый, если он удаляет первый добавленный класс. В соответствии с вашим требованием, это должно быть следующим:

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

Answer 5

Подумайте лучше, ваша логика.Посмотрите на это:

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 6

Судя по ней, если заменить второй, если с другой, он должен работать нормально. В противном случае, как 'если' будет работать каждый раз

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