我创建了一个带有按钮的侧面板。在单击时,我加载分配给每个按钮的特定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您可以优化此代码
我正在为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").…