切換jQuery PHP

Question

我正在嘗試使用jQuery切換按鈕。

jQuery(document).ready( function($) {
    $("#wp-admin-bar-maintenance").click( function() {
        var data = { action: 'maintenance' };

        $.post(maintenance.ajaxurl, data, function(response) {
            $(".maintenance-icon").toggleClass('flicker');
        });

        return false;
    });
});

可行，按鈕具有“閃爍”類並且在切換，但是現在PHP方面將其弄亂了。

function maintenance_adminbar() {
global $wp_admin_bar;

if( current_user_can( 'manage_options' ) ){
    if(get_option( 'maintenance' ) == true) {
        $wp_admin_bar->add_menu(array(
            'id' => 'maintenance',
            'title' => __('Maintenance') . get_option('maintenance'),
            'href' => '#',
            'meta' => array(
                'class' => 'maintenance-icon flicker'
            )
        ));
    } else {
        $wp_admin_bar->add_menu(array(
            'id' => 'maintenance',
            'title' => __('Maintenance') . get_option('maintenance'),
            'href' => '#',
            'meta' => array(
                'class' => 'maintenance-icon'
            )
        ));
    }
}

}
add_action('admin_bar_menu', 'maintenance_adminbar', 9999);

它的作用是，當get_option('maintenance')為true時， get_option('maintenance')使用PHP get_option('maintenance')按鈕添加了一個名為'flicker'的類。

但是現在切換功能將不再切換。 當我單擊它時，您可以看到它嘗試切換它，但是PHP代碼中的閃爍類覆蓋了它或其他東西。

有什么辦法可以解決這個問題？

---

更新。

這是上面AJAX函數使用的ping函數；

function maintenance_process() {
    update_option('maintenance', !get_option('maintenance'));
    echo get_option('maintenance');
    die();
}
add_action('wp_ajax_maintenance', 'maintenance_process');

Answer 1

我會做一些更改，但這僅基於我的經驗，工作流程以及我喜歡做的事情，因此，我將為每一項提供注釋和理由。

AJAX調用：我喜歡將ajax設置為返回一個我可以在javascript中讀取並響應的實際值，並且我總是（如果可能）將其作為JSON發送回去，因為它很小且易於解析。

<?php
function maintenance_process(){
    $maintenance = 1;
    if( 1 == get_option( 'maintenance' ) ){
        $maintenance = 0;
    }
    // I don't like using true/false in options and specifically
    // set the values to 1 or 0 for integer testing.
    update_option( 'maintenance', $maintenance );
    $result = array(
      'maintenance' => $maintenance
    );
    // Print JSON back to javascript
    exit( json_encode( $result ) );
}
add_action( 'wp_ajax_maintenance', 'maintenance_process' );

JavaScript：現在可以讀取來自ajax的JSON，並將其用於相應地切換類。 在這種情況下，我們可以從Ajax調用中讀取維護是打開還是關閉，然后設置/刪除我們的類。 還要注意，我已准備好$.post函數以在結尾添加參數來接收JSON。

jQuery(document).ready( function($){
    $( "#wp-admin-bar-maintenance" ).click( function( ev ){
        ev.preventDefault();
        var data = { action: 'maintenance' };
        $.post( maintenance.ajaxurl, data, function( response ){
            if( 1 === response.maintenance ){
                $( ".maintenance-icon" ).addClass( 'flicker' );
            } else {
                $( ".maintenance-icon" ).removeClass( 'flicker' );
            }
        }, 'json' );
    } );
} );

管理欄：這段代碼很好，但是使用我的方法，您只需將get_option檢查更改為：

if( 1 == get_option( 'maintenance' ) ){...}

我並不是說我設置/傳遞變量的方法一定更好，但是它對我成千上萬的站點（自定義主題和插件）都非常有效。 現在，您的javascript和管理條形碼無法同步，因為它們會對從ajax返回的特定值做出反應。

讓我知道這是否可行，或者我們可以對其進行故障排除。