我目前在 WordPress 中有一个页面,它有一个 jQuery 下拉菜单,根据选择显示/隐藏 div。然后我在内容中有自定义帖子。
这是我正在尝试修复的错误。 - website link
当我从下拉列表中选择“第 1 季”时,一切都很好。但是,如果您单击其中一个帖子并进入帖子,然后单击浏览器中的后退箭头,“第 1 季”仍会出现在下拉列表中,但第 2 季的帖子会出现在内容中。然后我必须选择“第 2 季”,然后选择“第 1 季”才能再次显示第 1 季的帖子。
这是我用来根据下拉选择显示/隐藏的 jQuery。
/*-- Season 2 first --- */
jQuery(document).ready(function ($) {
$('.js-podcast-list').hide()
/*
SET SEASON TO SHOW ON PAGE LOAD
*/
$('#season-2, #season-1').hide()
var season = $('#selectMe option:selected').val()
$('#' + season).show()
/*
SET SEASON TO SHOW ON #selectMe CHANGE
*/
$('#selectMe').change(function () {
$('.js-podcast-list').hide()
$('#' + $(this).val()).show()
})
})
有人对我如何解决这个问题或其他有效的 jQuery/javascript 方法有任何想法吗?谢谢你的时间!
答案 0 :(得分:0)
您的浏览器正在使用您之前选择的值自动完成选择。 为了防止这种情况,添加这样的自动完成属性:
<select autocomplete="off">[...]</select>
答案 1 :(得分:0)
重构一下并提取选择
/*
SET SEASON TO SHOW ON #selectMe CHANGE
*/
$('#selectMe').change(updateSeason);
function updateSeason(){
$('.js-podcast-list').hide()
$('#' + $(this).val()).show()
}
然后也只调用页面显示的方法。
$(window).on('pageshow', updateSeason);
这可能不是 100%,但它会让你开始。
旁注,您准备好的文档只需要这个:
jQuery(document).ready(function ($) {
$('.js-podcast-list').hide()
$('#season-2, #season-1').hide()
/*
SET SEASON TO SHOW ON PAGE LOAD
*/
updateSeason();
})
编辑:
jQuery(document).ready(function($) {
// On page load, hide everything
$('.js-podcast-list').hide()
$('#season-2, #season-1').hide()
// Update what is visible
updateSeason();
});
function updateSeason() {
jQuery('.js-podcast-list').hide() // did you want this as show?
jQuery('#' + jQuery(#selectMe).val()).show()
}
jQuery('#selectMe').change(updateSeason);
jQuery(window).on('pageshow', updateSeason);