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

Question

所以我使用 Jquery 尝试更改 bootstrap 按钮类当我使用 toggleClass 单击它们时但问题是我只能在它们之间切换只有 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>

Answer 1

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

Answer 2

你可以把所有你想申请的class放在一个数组里，把当前申请的class的数组索引存到一个变量里或者用jQuery的.data()方法。

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

$(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>

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

how to change button class when i click on it using Jquery?

javascript

css

jquery

bootstrap-4