Question

如何检查按钮是否有课程？

例如：如果按钮具有课程btn-success，则显示div .success-message。否则，如果按钮具有课程btn-danger，则显示div .danger-message。

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

Answer 1

$.hasClass()它正在寻找什么

$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);
            });
        }
    });
});

Answer 2

您必须在Click语句

之后放置if语句

$(".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);
    });
   }
  });
});

Answer 3

使用hasClass

var message = $this.hasClass('btn-success') ? '.success-message' : '.danger-message';

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

.show-message {
  position: relative;
  padding-top: 70px;
}
.message {
  width: 100%;
  height: 30px;
  color: #fff;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  line-height: 30px;
  display: none;
}
.success-message {
  background: #27ae60;
  display: none;
}
.danger-message {
  background: #e74c3c;
  display: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div class="container show-message">
  <div class="message success-message text-center">
    <p>Green message</p>
  </div>

  <div class="message danger-message text-center">
    <p>Red message</p>
  </div>

  <div class="col-md-8 offset-md-2">
    <div class="panel panel-default">
      <div class="panel-heading">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading text-bold">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>
  </div>
</div>

或is()

var message = $this.is('.btn-success') ? '.success-message' : '.danger-message';

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

.show-message {
  position: relative;
  padding-top: 70px;
}
.message {
  width: 100%;
  height: 30px;
  color: #fff;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  line-height: 30px;
  display: none;
}
.success-message {
  background: #27ae60;
  display: none;
}
.danger-message {
  background: #e74c3c;
  display: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div class="container show-message">
  <div class="message success-message text-center">
    <p>Green message</p>
  </div>

  <div class="message danger-message text-center">
    <p>Red message</p>
  </div>

  <div class="col-md-8 offset-md-2">
    <div class="panel panel-default">
      <div class="panel-heading">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading text-bold">Panel</div>
      <div class="panel-body">
        <a class="btn btn-disapear btn-success pull-left" href="#" role="button">Show green message</a>

        <a class="btn btn-disapear btn-danger pull-right" href="#" role="button">Show red message</a>
      </div>
    </div>
  </div>
</div>

Answer 4

为什么不使用CSS？类似的东西：

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

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

检查If按钮是否有类，然后显示div

4 个答案: