3

Tengo una pequeña aplicación que tiene un botón creado con Bootstrap:

<input id="boton" type="submit" name="proceso" class="btn btn-success" value="Proceso">

Mi idea es que al pulsar el botón una vez, cambie de color o cambie la clases bootstrap a:

class="btn btn-danger"

Si vuelvo a pulsar, pues que me vuelva a btn-success

Tengo que tener en cuenta de que los usuarios hacen login, es decir que si pulsan el botón y el botón se pone rojo, cuando vuelvan a entrar en la aplicación, el botón debe seguir estando rojo.

¿Alguna ayuda? Gracias!

1
  • 1
    y que as intentando hasta ahora??
    – Bryro
    Commented el 7 may. 2019 a las 15:16

2 respuestas 2

3

Usando la función .click() obtienes el evento de pulsar el botón y capturando la clase con .attr('class') puedes saber que tienes puesto y modificarlo con el siguiente ejemplo:

        $("#boton").click(function () {           
        
            var clase = $('#boton').attr('class');

            if (clase.includes("btn-success")) {                        
                $('#boton').removeClass('btn-success');
                $('#boton').addClass('btn-danger');
            } else {
                $('#boton').removeClass('btn-danger');
                $('#boton').addClass('btn-success');
            }           
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<input id="boton" type="submit" name="proceso" class="btn btn-success" value="Proceso">

5
  • En el el input, ¿tengo que llamar a la función esa no?
    – Maginon
    Commented el 8 may. 2019 a las 8:42
  • @Maginon No hace falta, con $('#boton') ya lo capturas, puedes verlo ejecutando el ejemplo Commented el 8 may. 2019 a las 8:46
  • La ultima. El código jquery, ¿es mejor ponerlo en un script arriba del documento no?
    – Maginon
    Commented el 8 may. 2019 a las 8:48
  • Te dejo este enlace que lo explica bastante bien Commented el 8 may. 2019 a las 8:51
  • Muchas gracias! Me ha sido de gran ayuda!
    – Maginon
    Commented el 8 may. 2019 a las 8:54
2

Para lo que intentas hacer puedes usar la propiedad classList de un elemento. Esto devuelve un array con las clases que tenga el item. Luego los vas cambiando entre uno y otro a medida que clickees.

Si quieres cambiar de color, solo basta con tener un css que cambie el color por cada clase.

let togg = true

function changeClass(btn){
  if (togg) {
    btn.classList.remove('btn-success');
    btn.classList.add('btn-danger');  
  }else {
    btn.classList.remove('btn-danger');  
    btn.classList.add('btn-success');
  }
  togg = !togg;
  
  console.log(btn.classList[0]+' '+btn.classList[1]);
}
<input id="boton" type="submit" name="proceso" class="btn btn-success" value="Proceso" onclick="changeClass(this);">

1
  • 1
    Intenté esto y también funcionaba, aunque mi idea se parecía más a la otra respuesta. De todas formas, muchas gracias por tu tiempo!
    – Maginon
    Commented el 8 may. 2019 a las 8:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.