Question

我在点击时添加了一个类.error，现在在2秒的时间间隔后我想删除这个类，但是没有页面重新加载/刷新。我在jQuery中使用了delay()：

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

但它不起作用。

然后我尝试了setTimeout()。

它正在工作，但正在重新加载页面。我希望在特定时间之后添加，然后删除类，但不刷新/重新加载页面。

请提供帮助，并提前感谢您。

Answer 1

＆＃13;

var element = document.getElementById('username');

element.classList.add('error');

window.setTimeout(function () {
  element.classList.remove('error');
}, 2000);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

使用jquery和setTimeout函数：

＆＃13;

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

＆＃13;

.error{
  color:red;
}

＆＃13;

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

＆＃13;

添加然后在延迟后删除类但没有页面刷新

2 个答案: