如何通过Banner按钮结合PHP与Ajax切换WordPress插件CSS样式

我在用Ajax时遇到了麻烦，所以打算只用JavaScript实现功能。我想在插件的全局Banner里加个切换按钮，实现两个已创建的CSS文件之间的页面样式切换。目前我已经在另一个PHP文件里做了选择样式并提交的表单，能实现插件全局样式更改，现在想通过POST请求获取选项来完成Banner按钮的切换功能。

样式选择表单（PHP） #

/**
 * 用于管理设置内容显示的类
 */
class WoosterPartnerSettings
{
    /**
     * 许可证有效时，挂钩显示“设置”菜单内容
     */
    public function __construct()
    {
        if (get_option('partner_license') && get_option('partner_license') != '') {
            add_action('tab_content_settings', array($this, 'wooster_partner_settings'));
            add_action('admin_init', array($this, 'display_style'));
            add_action('admin_enqueue_scripts', array($this, 'enqueue_style'));
        }
    }

    /**
     * 显示用于选择样式表的表单
     *
     * @return void
     */
    public function wooster_partner_settings()
    {
?>
        <div class="wrap">
            <h1><?php echo __('Wooster 设置', 'wooster-partner'); ?></h1>
            <hr class="line">

            <form method="post" action="options.php">
                <?php settings_fields('wooster-settings-group'); ?>
                <?php do_settings_sections('wooster-settings-group'); ?>

                <p class="parag"><?php echo __('伙伴插件提供两种显示样式：', 'wooster-partner'); ?></p>

                <label for="style_wordpress">
                    <input type="radio" id="style_wordpress" name="wooster_style" value="compagnon-wp.css" <?php checked(get_option('wooster_style'), 'compagnon-wp.css'); ?>>
                    <?php echo __('WordPress 样式', 'wooster-partner'); ?>
                </label>

                <label for="style_wooster">
                    <input type="radio" id="style_wooster" name="wooster_style" value="compagnon-wooster.css" <?php checked(get_option('wooster_style'), 'compagnon-wooster.css'); ?>>
                    <?php echo __('Wooster 样式', 'wooster-partner'); ?>
                </label><br>

                <input type="submit" class="wooster-button" value="<?php echo __('保存修改', 'wooster-partner') ?>">
            </form>
        </div>
<?php
    }


    /**
     * 注册Wooster插件样式的设置项
     *
     * @return void
     */
    public function display_style()
    {
        register_setting('wooster-settings-group', 'wooster_style');
    }

    /**
     * 为Wooster插件设置页面加载选中的样式表
     *
     * @return void
     */
    public function enqueue_style()
    {
        if (is_admin()) {
            if (isset($_GET['page']) && strpos($_GET['page'], 'wooster') === 0) {
                $selected_style = get_option('wooster_style', 'compagnon-wp.css'); // 默认样式
                wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
            }
        }
    }
}
new WoosterPartnerSettings();

全局Banner代码（PHP） #

if (!class_exists('WoosterBanner')) {
    class WoosterBanner
    {
        public function __construct()
        {
            if (isset($_GET['page']) && in_array($_GET['page'], ['wooster','wooster-followup','wooster-licences','wooster-compagnon','wooster-customers','wooster-partner','wooster-settings','wooster-setup']) && is_admin()) {
                add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
                add_action('in_admin_header', array($this, 'wooster_header_section'));
                add_action('wp_ajax_switch_css', array($this, 'switch_css')); // 用户登录时的请求处理
            }
        }

        public function wooster_header_section() {
            ?>
            <div id="top-bar-banner">
                <div class="wooster-banner">
                    <div class="logo">
                        <img src="<?php echo plugins_url('assets/img/logo.avif', __DIR__); ?>" alt="Logo">
                    </div>
                    <div class="actions">
                        <form method="post" action="options.php" id="form">
                            <?php settings_fields('wooster-settings-group'); ?>
                            <button type="button" id="wooster-exchange-button" class="button">
                                <i class="fas fa-exchange-alt"></i>
                            </button>
                        </form>
                        <a href="#" class="button"><i class="fas fa-question-circle"></i></a>
                    </div>
                </div>
            </div>
<?php
        }

        public function switch_css() {
            // 检查请求参数
            $style = isset($_POST['style']) ? $_POST['style'] : '';
            // style是HTML中选中样式的ID以及按钮标识
            if ($style === 'wooster-custom-style-css') {
                // 设置Cookie记住选中的样式
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/compagnon-wooster.css', __FILE__);
            } elseif ($style === 'csspartner-css') {
                // 设置Cookie记住选中的样式
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/compagnon-wp.css', __FILE__);
            }

            // 函数末尾必须退出
            exit;
        }

        public function enqueue_styles() {
            // 注册必要的样式和脚本
            wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
            wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');

            wp_enqueue_script('jquery'); // JS库
            wp_enqueue_script('wooster-banner', plugins_url('assets/js/banner.js', __DIR__), array('jquery'), null, true);
        }
    }
    new WoosterBanner();
}

切换按钮JavaScript代码 #

var currentStyle = 'style_wordpress'; // 设置默认样式

document.getElementById("wooster-exchange-button").addEventListener("click", function() {
    var style1 = document.getElementById('style_wordpress');
    var style2 = document.getElementById('style_wooster');

    if (currentStyle === 'style_wordpress') {
        style1.disabled = true;
        style2.disabled = false;
        currentStyle = 'style_wooster';
    } else {
        style1.disabled = false;
        style2.disabled = true;
        currentStyle = 'style_wordpress';
    }
});

内容的提问来源于stack exchange，提问作者OceaneEMILE