WordPress插件班车预订表单隐藏指定<li>项失败求助

以下是你的自定义代码未生效的常见原因及对应排查方案：

1. 页面ID判断逻辑错误 #

• 确认functions.php中页面判断是否正确，比如：

  add_action('wp_footer', 'hide_specific_pickup_item');
  function hide_specific_pickup_item() {
      if (is_page(130)) { // 确保此处ID为目标页面的正确ID
  ?>
  <script>
    // 你的JS代码
  </script>
  <?php
      }
  }
  

• 若表单通过短代码嵌入或使用自定义模板，可临时添加var_dump(is_page(130))到页面，验证判断逻辑是否生效。

2. DOM元素选择器不准确 #

• 上车点与目的地共用列表，必须给选择器加上上车点容器的专属标识，避免影响目的地列表：

  // 错误示例：全局匹配所有li，会干扰目的地列表
  document.querySelector('.target-li-class').style.display = 'none';
  
  // 正确示例：仅匹配上车点列表下的目标li
  document.querySelector('.pickup-container .target-li-class').style.display = 'none';
  

• 对照你提供的表单HTML，确认上车点列表的父容器是否有唯一class/id（如<ul class="pickup-options">），以此限定选择范围。

3. 代码加载时机不匹配 #

• 若插件表单为动态生成（如AJAX加载），普通DOM加载事件无法捕获元素，需用监听或延迟执行：

  // 用MutationObserver监听DOM变化
  const observer = new MutationObserver((mutations) => {
    const targetLi = document.querySelector('.pickup-container .target-li-class');
    if (targetLi) {
      targetLi.style.display = 'none';
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

• 也可使用$(document).ready(function(){...})确保DOM完全加载后执行代码。

4. 样式优先级被覆盖 #

• 若用CSS隐藏元素，插件内联样式可能优先级更高，需提升自定义样式优先级：

  .pickup-container .target-li-class {
    display: none !important; /* 用!important覆盖内联样式 */
  }
  

• 调整CSS加载优先级，比如：

  add_action('wp_enqueue_scripts', 'hide_pickup_css', 999); // 999为高优先级，确保在插件样式后加载
  function hide_pickup_css() {
      if (is_page(130)) {
          wp_add_inline_style('plugin-style-handle', '.pickup-container .target-li-class { display: none !important; }');
      }
  }
  

5. 缓存干扰 #

• 清理WordPress缓存插件（如WP Rocket、W3 Total Cache）的缓存，同时用Ctrl+Shift+R强制刷新浏览器，确保修改后的代码被加载。

内容的提问来源于stack exchange，提问作者patrickh