Question

由于我不擅长CSS，我试图通过使用jquery addClass向一个DIV添加一个CSS“glow”类来模拟一个按下的按钮行为（：active that think ..），然后在a之后删除它小延迟

这就是我编写代码的方式：

  $( ".cpUpbtnsclass" ).on('click', function() {

        console.log($( this ).attr('id')+" is clicked and a class will be added ! ");

           $( this ).addClass( "glow");

        setTimeout(function(){
            $( this ).removeClass( "glow");
        },300);
    });

这是我要添加的课程：

.glow {
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

我看到使用addClass添加了发光效果，但是300毫秒后我看不到它消失了。

Answer 1

超时会创建一个新范围，其中this不再是元素：

$( ".cpUpbtnsclass" ).on('click', function() {
    var self = this;

    $( this ).addClass( "glow");

    setTimeout(function(){
        $( self ).removeClass( "glow");
    },300);
});

Answer 2

尝试

$(".cpUpbtnsclass").on('click', function () {
    var this1 = $(this); //cache your selector 
    this1.addClass("glow"); 
    setTimeout(function () {
        this1.removeClass("glow"); //use cached selector 
    }, 300);
});

<小时/> 超时会创建一个新范围，因此$(this)不是您在setTimeout

中所考虑的元素

Answer 3

$(function(){
    $(document).on('click', '.cpUpbtnsclass', function(){
        console.log($( this ).attr('id')+" is clicked and a class will be added ! ");
           $('.cpUpbtnsclass').addClass( "glow");
        setTimeout(function(){
            $('.cpUpbtnsclass').removeClass( "glow");
        },300);
    })
})

在这里演示http://jsfiddle.net/N5Kk6/

尝试使用DIV模拟活动按钮时，Jquery removeClass不起作用

3 个答案: