提问者:小点点

使用jQuery更改按钮单击时的外观,并覆盖btn-warning类[重复]


null

// 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&amp;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>

null

大家好,我正在写一个函数来改变按钮的特定类,当点击按钮时,将文本改为“loading”,并将类改为“btn-warning”,使按钮的颜色变为橙色。 然而,当试图覆盖“危险”按钮时,它不会改变颜色从红色到橙色。 有人知道它为什么这样做或者如何修复它吗?


共1个答案

匿名用户

由此而来的这个问题

$("element").removeClass("class1 class2");

要从元素中移除的一个或多个CSS类,这些元素由空格分隔。

参考:http://docs.jquery.com/attributes/removeClass