使用 jQuery 更改单击按钮的外观，并覆盖 btn 警告类 [重复]
Posted
技术标签:
【中文标题】使用 jQuery 更改单击按钮的外观，并覆盖 btn 警告类 [重复]【英文标题】：Changing appearance of button on click with jQuery, and overwriting btn-warning class [duplicate] 【发布时间】：2020-10-14 18:34:42 【问题描述】：// add img in hidden state then fade
// copy title and alt attributes from small img to new one
jQuery(document).ready(function()
jQuery(".load-on-click").click(function()
jQuery(this).text("Loading").removeClass("btn-default, btn-primary, btn-success, btn-info, btn-danger, btn-link").addClass("btn-warning");
//change btn class to btn warning
);
);<html id="ntc-web-my" lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"
class="js">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://failover.northtyneside.gov.uk/sites/default/files/favicon_0.ico" type="image/vnd.microsoft.icon">
<meta name="generator" content="Drupal 7 (https://www.drupal.org)">
<link rel="canonical" href="https://failover.northtyneside.gov.uk/facility/938">
<link rel="shortlink" href="https://failover.northtyneside.gov.uk/node/938">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_y5V-74fl2u3TPnO7Vzl0srF2_LEAmcANj4_-6qPJyxk.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_6wBOCOFxVtHYT2hpGMbeDQ312q-jxDxgASHWdm3WYi4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_gwWRemXWt3xYLQ0FjqVRBTD7b5PQL91v8BAu8J2qKjk.css" media="all">
<style>
#backtotop
left: 10px;
</style>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_-U-YIgj5NQz73QbwdRP7JBqbYW5aUP8ZJhZOII6t4oY.css" media="all">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all">
<!--[if lt IE 10]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/overrides.min.css">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/legacy-overrides.min.css">
<button class="btn btn-primary load-on-click form-submit ajax-processed" type="submit" id="edit-find" name="op" value="Find">Find</button>
<!-- Standard button -->
<button type="button" class="btn btn-default load-on-click form-submit ajax-processed">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary load-on-click form-submit ajax-processed">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success load-on-click form-submit ajax-processed">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info load-on-click form-submit ajax-processed">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning load-on-click form-submit ajax-processed">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger load-on-click form-submit ajax-processed">Danger</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>您好，我正在编写一个函数来在单击时更改按钮的特定类，方法是将文本更改为“正在加载”并将类更改为“btn-warning”以使按钮的颜色变为橙色。然而，当试图覆盖“危险”按钮时，它不会将颜色从红色变为橙色。有谁知道它为什么这样做或如何解决它？
【问题讨论】：
警告按钮现在是橙色的 - 你是说危险按钮吗？ 对不起，是的，危险按钮就是我的意思，我会编辑我的帖子 我再说一遍，你不是说危险按钮 是的哈哈我的错，这是危险按钮。还删除了分隔类的逗号解决了这个问题，谢谢 【参考方案1】：来自this question
$("element").removeClass("class1 class2");
要从元素中删除的一个或多个 CSS 类，它们之间用空格分隔。
参考：http://docs.jquery.com/Attributes/removeClass
【讨论】：
如果是这种情况，为什么它对其他按钮起作用？以上是关于使用 jQuery 更改单击按钮的外观，并覆盖 btn 警告类 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
单击引导下拉项，使用toggleClass Jquery更改按钮类