当我使用 Jquery 单击它时如何更改按钮类？答案

【问题标题】：how to change button class when i click on it using Jquery?当我使用 Jquery 单击它时如何更改按钮类？
【发布时间】：2022-02-12 23:49:56
【问题描述】：

所以当我使用toggleClass 单击引导按钮类时，我正在使用 Jquery 尝试更改引导按钮类，但问题是我只能在 2 个类之间切换，而不能我想要什么，每次点击按钮时，我都想在至少 5 个或更多类之间切换，但我找不到方法

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>toggle</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $(this).toggleClass("btn btn-success btn btn-info btn btn-primary");
      });
    });
  </script>
  <style>
    #p {
      position: absolute;
      top: 50%;
      left: 50%;
    }
  </style>
  <body>
    <button id="p" class="btn btn-success">Random button</button>
  </body>
</html>

【问题讨论】：

.toggleClass("btn btn-success btn btn-info btn btn-primary") 调用的预期结果是什么？为什么btn 在里面出现了三遍？
看起来你误解了“toggleClass”的作用。它本质上是：foreach (var b in buttons) { foreach (var cls in buttonClasses) { if (b.hasClass(cls) b.removeClass(cls) else b.addClass(cls) } }。这不是“添加类回来如果它之前被删除”看看这个简单的例子：jsfiddle.net/6qw90vgo
@freedomn-m 哦，谢谢你的解释，但是我需要什么才能达到我需要的结果？
很难准确地说出您要做什么，但看起来您正在尝试切换类 btn-xxx - 对吗？
是的，我正在尝试在多个 btn 类之间切换，以改变我每次点击按钮的外观

标签： javascript jquery css bootstrap-4

【解决方案1】：

您可以将所有要应用的类放入一个数组中，并将当前应用的类的数组索引存储在一个变量中或使用 jQuery 的.data() 方法。

然后，每当单击按钮时，您都会检索并增加索引以获取下一个类并将其应用于按钮。试试这个

$(document).ready(function () {
    var classes = ['btn-success', 'btn-info', 'btn-primary'];

    $("button").click(function(){
        let idx = $(this).data('class-index') ?? 0; // index of the currently applied class
        let cls = classes[idx+1] ?? classes[0]; // get the next class
        $(this).data('class-index', classes.indexOf(cls)); // store the class index
        $(this).removeClass(classes).addClass(cls); // remove old class and apply new one
    });
});

button { outline: none!important; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<button id="p" class="btn btn-success">Random button</button>

【讨论】：

【解决方案2】：

您可以在每次单击按钮时增加一个计数器，并根据计数添加一个类。 0 = 绿色，1 = 红色。切换仅用于在两种状态之间切换，就像物理切换一样

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。