使用jquery

Question

我尝试在有人点击它时将活动类添加到元素，然后立即自动删除它。

我已经尝试了以下方法，但没有运气 -

方法 - 1

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

方法 - 2

$('.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>

Answer 2

我认为只使用CSS更好： 使用:active所以它将是这样的：

＆＃13;

＆＃13;

button {
    background-color:red;
}

button:active {
    background-color:green;
}

＆＃13;

<button type="button">
Click Here
</button>

＆＃13;

＆＃13;

＆＃13;

或稍微延迟：

＆＃13;

＆＃13;

button {
    border: 1px solid #bada55;
    background-color:red;
    transition: .50s all;   
    transition-delay: 1s; 
}

button:active {
    background-color:green;
    transition-delay: 0s;
}

＆＃13;

<button type="button">
Click Here
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试这个

在setTimeout函数调用之前添加class，几秒后它将使用settimeout删除

$('.classname').click(function() {
  $('.classname').addClass('active');
  setTimeout(function() {
    $('.classname').removeClass('active');
  }, 500);
});

.active {
  width: 30px;
  height: 20px;
  background: blue;
  color: white;
}

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

和switchclass

你很可能缺少jQuery UI，因为switchClass是jQuery UI的一部分，而不是jQuery库。

Answer 4

$(function () {
    setInterval(function () {
        $('.classname').addClass('active');
    }, 1000);
    setInterval(function () {
        $('.classname').removeClass('active');
    }, 2000);
});

.active{
color:red;
}

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

尝试这个