Jquery 检查按钮是否有类，然后显示一个div

如何检查按钮是否有类

例如：如果按钮具有class

btn success

，则显示div

。success message

。否则，如果按钮具有class

btn danger

，则显示div

。danger message

这就是你要找的

$this.hasClass( "danger-message" )

它看起来像这样

$(".btn-disapear").click(function () {
    var $this = $(this);
    $(this).closest(".panel").animate({
        opacity: 0
    }, 500).slideUp(400, function () {
        if ($this.hasClass("btn-success")) {
            $(".success-message").fadeIn(400, function () {
                $(this).delay(900).fadeOut(400);
            });
        } else if ($this.hasClass("btn-danger")) {
            $(".danger-message").fadeIn(400, function () {
                $(this).delay(900).fadeOut(400);
            });
        }
    });
});

使用

$（“.btn disapear”）。单击（函数（）{
var$this=$（this）；
var message=$this.hasClass（'btn-success'）？'。成功消息'：'。危险消息'；
$（此）。最近的（“.panel”）。动画({
不透明度：0
}slideUp（400，函数（）{
$（消息）.fadeIn（400，函数（）{
延迟（900）。淡出（400）；
});
});
});
。显示消息{
位置：相对位置；
填充顶部：70px；
}
.留言{
宽度：100%；
高度：30px；
颜色：#fff；
文本转换：大写；
位置：绝对位置；
排名：0；
左：0；
z指数：99；
线高：30px；
显示：无；
}
.成功信息{
背景：#27ae60；
显示：无；
}
.危险信息{
背景：#e74c3c；
显示：无；
}

绿色信息

红色消息

面板
面板
面板
为什么不直接使用CSS？比如：

.btn-disapear.btn-success .success-message {
    display:block;
}

.btn-disapear.btn-danger .danger-message {
    display:block;
}

您必须将if语句放在click语句之后

$(".btn-disapear").click(function() {
var $this = $(this);
$(this).closest(".panel").animate({opacity: 0}, 500).slideUp(400, function() {
    if($this.hasClass("btn-success")){
    $(".success-message").fadeIn(400, function() {
        $(this).delay(900).fadeOut(400);
    });
}
else{
$(".danger-message").fadeIn(400, function() {
        $(this).delay(900).fadeOut(400);
    });
   }
  });
});

.btn-disapear.btn-success .success-message {
    display:block;
}

.btn-disapear.btn-danger .danger-message {
    display:block;
}

$(".btn-disapear").click(function() {
var $this = $(this);
$(this).closest(".panel").animate({opacity: 0}, 500).slideUp(400, function() {
    if($this.hasClass("btn-success")){
    $(".success-message").fadeIn(400, function() {
        $(this).delay(900).fadeOut(400);
    });
}
else{
$(".danger-message").fadeIn(400, function() {
        $(this).delay(900).fadeOut(400);
    });
   }
  });
});