así que estoy usando Jquery para intentar cambiar las clases de botones de arranque cuando hago clic en ellos usando toggleClass pero el problema es que solo puedo alternar entre solo 2 clases y eso no es lo que quiero, quiero alternar entre al menos 5 clases o incluso más cada vez que hago clic en el botón, pero no encuentro la manera de hacerlo
<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>Puede incrementar un contador cada vez que se hace clic en el botón y agregar una clase según el conteo. 0 = verde, 1 = rojo. Alternar es solo para cambiar entre dos estados como lo haría una palanca física
Puede poner todas las clases que desea aplicar en una matriz y almacenar el índice de la matriz de la clase aplicada actualmente en una variable o usando el método .data() de jQuery.
Luego, cada vez que se hace clic en el botón, recupera y aumenta el índice para obtener la siguiente clase y aplicarla al botón. Prueba esto
$(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>