Question

也许我错过了文档中的内容：

http://getbootstrap.com/components/#alerts

我想在点击按钮时显示Alert（在Bootstrap意义上）jQuery $("#btnAlert").click(function() { $("#success-alert").show(); });。这是一个简单的片段：

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible hide" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

＆＃13;

hide

＆＃13;

它不起作用。删除object.o: $(SRCDIR)object.c $(CC) -c -o $(OBJDIR)/object.o $(CFLAGS) $(INCLUDEDIR) $^类警报将保持可见，但当然不是我想要的。

我错过了什么？

Answer 1

试试这个......

＆＃13;

$("#btnAlert").click(function() {
  $("#success-alert").show();
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible" style="display:none" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

＆＃13;

Answer 2

点击删除课程hide应该有效。

$("#btnAlert").click(function() {
  $("#success-alert").removeClass('hide');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="alert alert-success alert-dismissible hide" id="success-alert" role="alert">
  <strong>Success! </strong>
</div>

<button type="button" class="btn btn-primary" id="btnAlert">Show</button>

使用jQuery显示引导警报

2 个答案: