Question

我目前在 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 方法有任何想法吗？谢谢你的时间！

Answer 1

您的浏览器正在使用您之前选择的值自动完成选择。为了防止这种情况，添加这样的自动完成属性：

<select autocomplete="off">[...]</select>

Answer 2

重构一下并提取选择

  /*  
    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);

jQuery 错误 - 需要解决方案

2 个答案: