Tengo un campo personalizado en forma de casilla de verificación en el panel de administración de mi sitio web de WordPress. Quiero cargar diferentes métodos JavaScript basados en la selección de esta casilla de verificación. Ya he probado el siguiente enfoque:

 <script> function setFirstStyle() { $('#faq-div').addClass('style-one'); } function setSecondStyle() { $('#faq-div').addClass('style-two'); } <?php if(!empty(get_field('my_custom_field')) && get_field('my_custom_field') == "Yes"):?> setFirstStyle(); <?php else: ?> setSecondStyle(); <?php endif; ?> </script>

También puse los estilos CSS relevantes para cada estilo en mi archivo .css , pero el script no funciona correctamente y siempre obtengo el estilo predeterminado (que es el estilo dos), aunque cambio el valor de los campos personalizados en la página wp-admin. .

Cuando agrego una casilla de verificación a mi código html como se muestra a continuación y escribo una función para escuchar esa casilla de verificación, el problema se resuelve, pero no quiero hacer esto. Quiero resolver el problema con campos personalizados y sin usar ningún otro elemento html.

 <input type="checkbox" id="change-style"/> <script> $('#change-style').on('change', function () { if (this.checked) { setSecondStyle(); } else { setFirstStyle(); } }); </script>

¿Cómo puedo solucionar este problema en WordPress?