html - ¿Cómo comprobar si algún elemento tiene una clase en jQuery?

$(".Button").click(function (e) { 
    e.preventDefault();
    if (!$(this).hasClass("buttonActive")) {
        $(this).addClass("buttonActive");
    } else {
        $(this).removeClass("buttonActive");
    }
});

.buttonActive {
    background: #100f10;
    color: white;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
  <button type="button" value="1" class="Button">1</button>
  <button type="button" value="2" class="Button">2</button>
  <button type="button" value="3" class="Button">3</button>
  <button type="button" value="4" class="Button">4</button>
  <input type="hidden" name="number" id="number">
</div>

Lo que quiero hacer es que cuando hago clic en cualquier botón se verifique si hay algún otro botón que tenga la clase "botónActivo". y si algún otro botón tiene esta clase, elimina la clase del otro botón y la agrega al botón en el que hice clic. Por lo tanto, siempre debe haber un solo botón que tenga la opción "botónActivo" clase.

4

En lugar de eso, sería mejor que usaras botones de opción, que ya tienen esta función.

– Rojo

28/03/2021 a las 13:52

2

solo usa estas líneas $(".Button").removeClass("buttonActive");$(this).addClass("buttonActive");

- Swati

28/03/2021 a las 13:56

2

No es necesario e.preventDefault(); si es un tipo = "botón" - aquí no hay nada especial que impedir.

- Roko C. Buljan

28/03/2021 a las 13:56

2

También hay una función incorporada en jquery para alternar clase: api.jquery.com/toggleClass

-ikiK

28/03/2021 a las 14:01

Y para aclarar, no es necesario "comprobar si algún botón tiene la claseLuego elimínelo. simplemente elimínelo; si no hay ninguno en la clase, no se hace nada. $(".class").removeClass("clase")

– libertadn-m

28/03/2021 a las 14:45

------------------------------------

Primero debes eliminar la clase de todos los botones y luego agregarla al botón en el que se hizo clic de esta manera:

$(".Button").click(function (e) { 
    e.preventDefault();
    if (!$(this).hasClass("buttonActive")) {
        $("button").removeClass("buttonActive");
        $(this).addClass("buttonActive");
    }
});

.buttonActive {
    background: #100f10;
    color: white;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
  <button type="button" value="1" class="Button">1</button>
  <button type="button" value="2" class="Button">2</button>
  <button type="button" value="3" class="Button">3</button>
  <button type="button" value="4" class="Button">4</button>
  <input type="hidden" name="number" id="number">
</div>

------------------------------------

No es necesario comprobar la existencia de una clase mediante el if {... } condición. Esto se puede hacer en el propio selector de jquery. Eliminar una clase afectará sólo a aquellos selectores que contengan esta clase, pero no al selector actual (este):

...(".Button.buttonActive").not(this).removeClass("buttonActive");

Hay varias variaciones de la solución a su problema. Pero quiero ofrecer una solución en una sola línea, sin condiciones si.

$(".Button").click(function (e) {
    e.preventDefault();
    $(this).addClass("buttonActive").closest("#numberSelect").find(".Button.buttonActive").not(this).removeClass("buttonActive");
});

.buttonActive {
    background: #100f10;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
    <button type="button" value="1" class="Button">1</button>
    <button type="button" value="2" class="Button">2</button>
    <button type="button" value="3" class="Button">3</button>
    <button type="button" value="4" class="Button">4</button>
    <input type="hidden" name="number" id="number" />
</div>