Dado un documento HTML con encabezado y botón, jQuery debe activar un evento cuando cambia la clase CSS del botón.
Enfoque: en jQuery, no existe ninguna disposición para desenstringr un evento en el cambio de clase. Un método alternativo es generar manualmente un evento cuando cambia la clase mediante programación usando la función trigger() . La función trigger() generará un evento cada vez que se cambie la clase del botón.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
.buttonstyle {
background-color: #4CB96B;
color: white;
}
.buttonsize {
padding: 1em;
height: 70px;
width: 400px;
border: .5px solid black;
outline: none;
font-size: large;
border-radius: 10px;
}
</style>
</head>
<body>
<center>
<h1>
Click the button to
change its style
</h1>
<button id="classchange-btn"
class="buttonsize">
Click Me
</button>
</center>
<script>
$("#classchange-btn").click(function () {
$(this).toggleClass("buttonstyle")
.trigger('classChanged');
});
$("#classchange-btn").on(
"classChanged", function () {
alert("Button Style Change event fired");
});
</script>
</body>
</html>
Producción:
Inicialmente, la página se parecía a la siguiente imagen.
Al hacer clic en el botón, aparece un mensaje de alerta que indica que el oyente fue despedido y que la clase CSS del botón ha cambiado.
Después de cerrar la ventana emergente, la clase CSS del botón cambió (observe el color de fondo verde y el texto blanco).
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por soorajsnair y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA