遅れてもページをリフレッシュしないでクラスを追加してから削除してください

Question

クリックするとクラスに.errorを追加します.2秒後にこのクラスを削除しますが、ページの再ロード/リフレッシュは行いません。delay()をjQueryで使用しました。

$('#username').addClass('error').delay(2000).removeClass('error'); 

しかし、機能しません。

その後、私はsetTimeout()を試しました。

動作していますが、ページを再読み込みしています。特定の時間後にクラスを追加して削除するものが必要ですが、ページをリフレッシュ/リロードしないでください。

事前にお手伝いしていただきありがとうございます。 jQueryとsetTimeout関数の使用

Answer 1

：

var $elm = $("#username").addClass("error"); 
 
setTimeout(function() { 
 
    $elm.removeClass("error"); 
 
}, 2000);

.error{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="username">USER NAME</div>

Answer 2

var element = document.getElementById('username'); 
 

 
element.classList.add('error'); 
 

 
window.setTimeout(function() { 
 
    element.classList.remove('error'); 
 
}, 2000);

#username { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    color: white; 
 
    background-color: green; 
 
    text-align: center; 
 
    transition: background-color .25s linear; 
 
} 
 
#username.error { 
 
    background-color: red; 
 
}

<div id="username">Username</div>