使用Jquery更改Bootstrap警报类

可以通过以下步骤实现：

首先，确保你已经引入了Jquery和Bootstrap的相关文件。可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

在HTML中，创建一个警报框元素，例如：

<div id="myAlert" class="alert alert-primary" role="alert">
  This is a primary alert.
</div>

使用Jquery选择器选中警报框元素，并使用removeClass()方法移除原有的警报类，然后使用addClass()方法添加新的警报类。例如，将警报类从alert-primary更改为alert-danger：

$("#myAlert").removeClass("alert-primary").addClass("alert-danger");

如果需要在更改警报类后更新警报框的文本内容，可以使用text()方法。例如：

$("#myAlert").text("This is a danger alert.");

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Change Bootstrap Alert Class using Jquery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="myAlert" class="alert alert-primary" role="alert">
    This is a primary alert.
  </div>

  <button onclick="changeAlertClass()">Change Alert Class</button>

  <script>
    function changeAlertClass() {
      $("#myAlert").removeClass("alert-primary").addClass("alert-danger");
      $("#myAlert").text("This is a danger alert.");
    }
  </script>
</body>
</html>

这样，当点击"Change Alert Class"按钮时，警报框的类将从alert-primary更改为alert-danger，并更新文本内容为"This is a danger alert."。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景，具有高性能、高可靠性和灵活性。了解更多信息，请访问：腾讯云云服务器（CVM）
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问：腾讯云对象存储（COS）

使用Jquery更改Bootstrap警报类

javascript、jquery、bootstrap-4

</div> 当用户提交表单时，我检查表单输入，并根据结果使用jquery更改警报文本，如下所示。; 它工作得很好，但是我想在成功登录时提醒类成功，我不知道如何更改类。

浏览 19提问于2021-06-29得票数 0

回答已采纳

2回答

隐藏的引导通知块按钮

javascript、html、twitter-bootstrap

在我的网站上，我使用一些通知用户，如果成功或错误。过了一段时间，警报被隐藏起来： $("#alertLogged").removeClass("show");我的问题是，由于警报被隐藏，警报后面的所有按钮仍然不可点击。但我认为，如果警报出现在网站顶部，效果会更好。除此之外，我还试图彻底摧毁警戒线，而不仅仅是隐藏它，这也解决了问题。(“TEST”)被调用，但是"TEST2“没有出

浏览 0提问于2019-01-12得票数 6

回答已采纳

2回答

document.getElementsByClassName in JavaScript

javascript、jquery、html

我使用引导带3发出了两条警告消息，每个警报都是div和类警报。为什么下面的JS脚本不工作？谢谢。document.getElementsByClassName("alert"); alerts[i].className += "fade in";我试过使用j

浏览 2提问于2015-06-17得票数 2

回答已采纳

3回答

Bootstrap警报解除不起作用，rails 3.2

javascript、twitter-bootstrap

在Rails 3.2中使用twitter bootstrap 2.0 (资产/样式表中的css文件，现在不使用less或sass )当我单击关闭符号时没有

浏览 6提问于2012-02-11得票数 9

回答已采纳

1回答

引导3警报-使用jQuery或JS显示

jquery、html、twitter-bootstrap、twitter-bootstrap-3、bootstrap-modal

我有一个像它一样的引导带3警报div <button以及如何使用JS或jQuery恢复它。请帮帮忙。

浏览 4提问于2015-09-18得票数 4

回答已采纳

2回答

关闭警报时引导内容平滑滑动

javascript、twitter-bootstrap-3、alert

$(".alert").alert();当关闭警报时，内容跳到顶部并不是很顺利编辑：现在当我是时代码工作正常，但是当我在服务器上使用它时，只有一半是工作的。3秒后警报就消失了，但是如果我按下“关闭”按钮，什么都不会发生。以下是我的密码。

浏览 0提问于2015-07-26得票数 9

回答已采纳

2回答

引导关闭按钮显示不正确

jquery、bootstrap-4

我有一个通过jquery提交表单时弹出的引导警报，但“解雇”按钮与文本重叠，我不知道原因。我不是在设计警报或按钮。下面使用的错误和代码的屏幕截图：

浏览 1提问于2018-11-05得票数 0

回答已采纳

4回答

使用twitter的引导程序发出警报几秒钟后消失

javascript、jquery、html、twitter-bootstrap

我试图学习twitter的引导CSS框架，向用户发出一些警告，我希望，在向用户显示警报之后，3秒过后警报就消失了。我编写了这段代码，但不工作，无法关闭警报，也不明白我做错了什么： <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1&#x

浏览 3提问于2014-01-23得票数 3

回答已采纳

2回答

引导问题中的单选按钮onclick

javascript、php、jquery、css、bootstrap-4

我正在尝试使用onclick，甚至在bootstrap中使用单选按钮，但onclick事件不会触发。我正在使用这个代码但是当我使用

浏览 0提问于2018-05-24得票数 0

1回答

用JQuery激活引导提醒

javascript、jquery、html

我对JQuery很陌生，我的问题是我在一个模式中有一个按钮，当我点击它时，会运行一个JQuery脚本。我需要这个脚本来显示一个警告框。

浏览 2提问于2014-04-16得票数 0

回答已采纳

1回答

函数，该函数读取和显示不同颜色的滑块值。

javascript、html、jquery、css

div class="form-group col-md-6"> <label for="formControlRange">Com que percentagem recomendaria o Bootstrap

浏览 0提问于2020-11-25得票数 1

回答已采纳

10回答

Twitter Bootstrap提醒可以淡入淡出吗？

jquery、css、alerts、twitter-bootstrap

当我第一次看到Bootstrap中的警告时，我认为它们的行为会像模式窗口一样，向下或淡入，然后在关闭时淡出。但它们似乎总是可见的。

浏览 6提问于2011-10-06得票数 80

回答已采纳

1回答

如何用jQuery调用Bootstrap* alert？*

javascript、jquery、twitter-bootstrap

</strong> This alert box could indicate a neutral informative or action如何使用jQuery手动激活？

浏览 2提问于2015-09-22得票数 6

回答已采纳

1回答

几天前，我在MVC5中启动了一个项目，将Twitter bootstrap升级到3.3.5版本。问题是当我遇到错误时，可视化它的元素没有任何CSS。</div> 但是，当我检查元素并将"alert-error“更改为"alert-danger”时，CSS起作用了。你能告诉我问题出在哪里吗？我正在使用Twitter Bootstrap 3.3.5 v，我应该降级还是不降级。以及如何解决这个问题。

浏览 2提问于2015-09-09得票数 0

3回答

如何使用bootstrap类将bootstrap-alert高度显示为较小的字体？

twitter-bootstrap、bootstrap-4

我在点击delete-button后设置了警报。但是它的默认高度更大，我想让它更小( height )。有没有像sm、xs这样的类让alert变得很小，就像我们在<button class="btn-sm">中使用的那样

浏览 0提问于2018-07-08得票数 1

3回答

Bootstrap CSS和组件之间的差异

twitter-bootstrap

在上，这些功能在标题、和下拆分。CSS和Components有什么区别？到底是什么决定了哪些引导程序功能属于这两个类别中的哪一个？

浏览 1提问于2015-10-20得票数 3

1回答

表单提交后自动关闭引导警报

javascript、jquery、ajax、twitter-bootstrap

我有一个ajax表单，它向数据库提交数据，它使用引导警报，当它成功的时候，我希望警报在一段时间过去之后关闭，但是每次都需要这样做。例如，如果我加载表单并进行一些更改并按submit，它将显示成功警报，然后关闭；如果我再次提交表单--例如，我忘记更改什么--它将再次显示警报，但这一次它没有关闭。我怎样才能每次都显示和关闭警报呢？我在页面中提供了一个带有硬编码警报的示例，但是这是使用javascript写入页面的，但我想

浏览 0提问于2018-05-16得票数 0

11回答

如何使用twitter bootstrap显示/隐藏特定警报？

javascript、jquery、html、twitter-bootstrap

下面是我使用的一个警报示例： <span> </span>我知道$(".alert").show()和$(".alert").hide()将显示/隐藏.alert类</em

浏览 1提问于2013-06-28得票数 38

回答已采纳

2回答

删除和添加Bootstrap* 4警报类中断警报类型*

javascript、jquery、css、bootstrap-4

我正在使用Bootstrap 4为web应用程序创建一个警报系统。onclick="bsalert('success', 'nice');">two</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"

浏览 0提问于2020-05-04得票数 0

2回答

如何在几秒钟后自动关闭一个警报与引导？

javascript、html、twitter-bootstrap、alert、auto-close

我已经开发了一个Python/Flask应用程序，并遇到了一个实现Bootstrap警报的问题，其中的想法是：如果不采取任何行动，则在2s后淡出并关闭。

浏览 17提问于2021-06-28得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用Jquery更改Bootstrap警报类

相关·内容

使用Jquery更改Bootstrap警报类

隐藏的引导通知块按钮

document.getElementsByClassName in JavaScript

Bootstrap警报解除不起作用，rails 3.2

引导3警报-使用jQuery或JS显示

关闭警报时引导内容平滑滑动

引导关闭按钮显示不正确

使用twitter的引导程序发出警报几秒钟后消失

引导问题中的单选按钮onclick

用JQuery激活引导提醒

函数，该函数读取和显示不同颜色的滑块值。

Twitter Bootstrap提醒可以淡入淡出吗？

如何用jQuery调用Bootstrap* alert？*

MVC 5和Bootstrap* 3.3.5*

如何使用bootstrap类将bootstrap-alert高度显示为较小的字体？

Bootstrap CSS和组件之间的差异

表单提交后自动关闭引导警报

如何使用twitter bootstrap显示/隐藏特定警报？

删除和添加Bootstrap* 4警报类中断警报类型*

如何在几秒钟后自动关闭一个警报与引导？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐