Tengo un botón Me gusta, cuando presionas el botón, se supone que cambia de estado. Lo estoy haciendo con jQuery. Cuando hace clic en el botón, cambia el color y en ctrl+shift+i también las clases; sin embargo, no cambia las clases en ctrl+u+i, lo que hace que jQuery no note el cambio de clases. Esencialmente, la primera vez que haga clic en el botón, cambiará de color, pero permanecerá estático. ¿Alguna idea de cómo arreglarlo?
Aquí está mi código:
$('.unclicked-like-button').click(function(){ $(this).removeClass('unclicked-like-button'); $(this).addClass('clicked-like-button'); }) $('.clicked-like-button').click(function(){ $(this).removeClass('clicked-like-button'); $(this).addClass('unclicked-like-button'); }) .unclicked-like-button { color: black; } .clicked-like-button { color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class = 'unclicked-like-button' id='like-button'> Like </button>El problema es que está adjuntando los oyentes a los elementos que tienen las clases unclicked-like-button clicked-like-button en el punto de conexión, es decir, cuando la página se carga por primera vez. En ese punto, hay un botón con la primera clase y ninguno con la segunda clase. Aunque después del primer clic, el controlador de eventos cambia la clase, eso no cambia qué función del controlador de eventos se adjunta al clic del botón. Ese controlador se adjuntó al elemento en sí, no a ningún elemento que pueda o no tener esa clase más tarde.
Si bien puede resolver esto con la delegación de eventos, como @evolutionxbox mencionó en su comentario, la forma más sencilla aquí es, creo, simplemente adjuntar el controlador usando la ID del botón, para que nadie lea el código sobre qué elemento lo está recibiendo. y luego verifique la clase actual dentro del controlador:
$('#like-button').click(function(){ if ($(this).hasClass('unclicked-like-button') { $(this).removeClass('unclicked-like-button'); $(this).addClass('clicked-like-button'); } else { $(this).removeClass('clicked-like-button'); $(this).addClass('unclicked-like-button'); } })Dado que el javascript se ejecuta cuando se carga la página, solo puede encontrar el botón Me gusta sin hacer clic. Moví esto a una función para ejecutar cada vez que se hace clic en el botón y parece haber resuelto su problema.
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> </script> <style> .unclicked-like-button { color: black; } .clicked-like-button { color: blue; } </style> <button class='unclicked-like-button' id='like-button' onclick="changeState()">Like</button> <script type="text/javascript"> function changeState() { const likeButton = $('#like-button'); if (likeButton.hasClass('unclicked-like-button')) { likeButton.removeClass('unclicked-like-button'); likeButton.addClass('clicked-like-button'); } else { likeButton.removeClass('clicked-like-button'); likeButton.addClass('unclicked-like-button'); } } </script>