如何在Ajax中正确设置返回按钮? - php

我创建了一个带有按钮的侧面板。在单击时,我加载分配给每个按钮的特定php文件。如何正确添加使我们返回默认按钮列表的功能?

HTML:

<div class="sidemenu">
    <div class="content">
        <button data-content="first">Load first content</button>
        <button data-content="second">Load second content</button>
        <button data-content="third">Load third content</button>
    </div>
</div>

脚本:

jQuery( document ).ready( function( $ ) {

    $( '.sidemenu button' ).on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );

        $( '.sidemenu .content' ).empty();

        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                $( '.sidemenu .content' ).append( result );
                console.log(result);

            }
        });

    });
});

PHP:

function sidemenu_content() {
if( isset( $_GET['content'] ) ) {
    $content= $_GET['content'];
    if ( $content == 'first' ) {
        require_once( get_template_directory() . '/sidemenu/first.php' );
    } elseif ( $content == 'second' ) {
        require_once( get_template_directory() . '/sidemenu/second.php' );
    } elseif ( $content == 'third' ) {
        require_once( get_template_directory() . '/sidemenu/third.php' );
    }
}
wp_die();
}

我试图在三个php文件和<button data-content="return">Return</button>函数中分别添加sidemenu_content

if ( $content == 'return' ) {
    require_once( get_template_directory() . '/sidemenu/return.php' );
}

但不幸的是,它不起作用。

更新

几乎所有代码都可以使用此代码。出现“返回”按钮,但onclick并未真正返回到按钮列表。

var backup;
jQuery( document ).ready( function( $ ) {

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                backup = $( '.sidemenu .content' ).innerHTML;
                $( '.sidemenu .content' ).innerHTML = result;
                $( '.sidemenu .content' ).empty();
                $( '.sidemenu .content' ).append( '<button class="return">Return</button>' + result );
                $( '.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).innerHTML = backup;
                })
            }
        })
    })
});

参考方案

我认为,如果在单击返回按钮浏览器时未发送AJAX来获取已有的代码,则对性能有好处。单击返回后,我将隐藏的块添加到备份按钮以重复使用

<div class="sidemenu">
    <div class="content">
        <button data-content="first">Load first content</button>
        <button data-content="second">Load second content</button>
        <button data-content="third">Load third content</button>
    </div>
    <div class="hidden" style="display:none;"></div>
</div>

和jQuery:

jQuery( document ).ready( function( $ ) {

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                $( '.sidemenu .hidden' ).append($( '.sidemenu .content button' ));
                $( '.sidemenu .content' ).html(result);
                $( '.sidemenu .content' ).append('<button class="return">Return</button>');
                $('.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).empty();
                    $( '.sidemenu .content' ).append($( '.sidemenu .hidden button' ));
                })
            }
        })
    })
});       

怎么运行的:
在清空所有数据之前,我已备份,并且在ajax响应成功之后,我清空了数据并追加了响应数据。在响应数据之后,我附加了返回按钮。如果单击此按钮,所有.content中的数据为空,并附加备份的代码。
P.S您可以优化此代码

php-casperjs获取内部文本 - php

我正在为casperjs使用php包装器-https://github.com/alwex/php-casperjs我正在网上自动化一些重复的工作,我需要访问一个项目的innerText,但是我尚不清楚如何从casperjs浏览器访问dom。我认为在js中我会var arr = document.querySelector('label.input…

php getdate()-小时不正确 - php

我在iframe中将php用于计数器。我正在使用getdate();功能。我的当地时间不是下午12:16,如果我使用getdate();从php获取现在的本地时间,小时显示为13。我从php getdate()回答的值应该不是12吗?$d1=getdate(); $hournew=$d1['hours']; echo $hournew .…

php:是否有充分的理由引用所有数组键/索引? - php

我正在遍历别人的代码,他们总是避免转义其数组键。例如:$ row_rsCatalogsItems [名称]代替$ row_rsCatalogsItems ['名称']因此,我不断地对自己接触的所有事物进行微小的更改,以应对这些惰性。但是现在我想知道这样做是否有很多好处。我得到它会在默认为字符串之前检查常量(我在处理常量时会讨厌php中的行为,因为即使未定义,…

将输入类型复选框关联到输入类型文本 - php

我有一个问题,我需要将输入类型复选框与输入类型文本关联。情况如下:从数据库中提取数据。 PK数据是复选框的值。当复选框选择输入类型的文本时,您可以在其中输入特定数字。现在的问题是,选中所有类型的复选框输入文本都会被激活。我希望通过选择复选框输入,仅启用与复选框相关联的输入。我的HTML代码(此代码创建一个输入复选框,并为数据库中的每个记录输入文本,而我要激活…

当文本等于单选按钮的值时,选择单选按钮 - php

当下拉菜单中的文本等于值时,是否可以选择2个名称相同但值不同的单选按钮中的1个?https://paste.ee/p/2iCjA第97行我用if-else尝试过:if($('input[name="anrede"]').val() == 'Herr') { $("#Herr").…