javascript - 仅在使用 jquery 单击期间将事件类添加到元素 onclick

Question

我试图在有人点击某个元素时将事件类添加到该元素，然后立即自动将其删除。

我已经尝试过以下方法，但还没有成功 -

方法一

setTimeout(function() {
    $('.classname').on('click', function() {
        $('.classname').addClass('active');
    }, 1000);
});

方法二

$('.classname').on('click', function() {
    $( ".classname" ).switchClass( "active", "no-active", 1000 );
});

Answer 1

您是正确的，因为您需要使用 setTimeout()，但是逻辑有点不对。

首先，您需要在点击处理程序中使用 setTimeout() 。然后，您将需要在计时器完成时对所单击元素的引用调用 removeClass()。试试这个:

$('.classname').on('click', function() {
  var $el = $(this).addClass('active');
  setTimeout(function() {
    $el.removeClass('active');
  }, 1000);
});

div {
  transition: color 0.3s, background-color 0.5s;
}
.active { 
  color: #FFF;
  background-color: #C00; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>

但是，从您发布的图像看来，您可能只需要添加一个 :active 状态。当鼠标按钮被按住时，这将应用于元素:

div:active {
  background-color: #C00;
  color: #FFF;
}

<div>Click me</div>