在WordPress循环中使用JS/jQuery显示和隐藏div的正确方法

嘿，我太懂你在WordPress循环里踩的这个坑了——重复ID选择器绝对是罪魁祸首！之前我也试过用临时方法凑活，后来才摸清楚标准的正确姿势，核心就是利用DOM层级关联每个循环项的触发元素和目标元素，而不是依赖容易冲突的全局ID。

第一步：修正循环的HTML结构 #

首先给每个循环项添加独立容器，并用通用类标记触发元素（点击触发切换）和目标元素（要显示/隐藏的div）：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <!-- 每个循环项的独立容器，可选加data属性标记唯一ID，方便调试 -->
  <div class="row post-item" data-post-id="<?php the_ID(); ?>">
    <div class="col-md-8 toggle-trigger">
      <!-- 点击图片触发切换 -->
      <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title_attribute(); ?>">
    </div>
    <div class="col-md-4 offers toggle-target">
      <h2 class="offers--title"><?php the_title(); ?></h2>
      <hr class="offers-divider">
      <!-- 这里放你的offers内容 -->
      <?php the_content(); ?>
    </div>
  </div>
<?php endwhile; endif; ?>

如果想改成点击标题触发，只需要把toggle-trigger类加到<h2>标签上就行

第二步：编写兼容WordPress的jQuery代码 #

WordPress默认加载的jQuery是noConflict模式，不能直接用$，必须用兼容写法。这里我们利用DOM层级关系，通过closest()找到当前触发元素所属的循环项容器，再定位到对应的目标元素：

// 包裹成兼容模式，避免$和其他脚本冲突
(function($) {
  $(document).ready(function() {
    // 默认隐藏所有目标元素（可选，根据需求调整）
    $('.toggle-target').hide();

    // 绑定点击事件到所有触发元素
    $('.toggle-trigger').on('click', function() {
      // 找到当前触发元素所在的循环项，再定位到对应的目标div
      $(this).closest('.post-item').find('.toggle-target').toggle();
      // 如果需要平滑动画效果，替换成slideToggle()或fadeToggle()
      // $(this).closest('.post-item').find('.toggle-target').slideToggle(300);
    });
  });
})(jQuery);

第三步：WordPress规范加载脚本（可选但推荐） #

不要直接把JS代码写在模板里，最好放在独立的JS文件中，通过WordPress的wp_enqueue_script加载，这样更符合规范，也方便维护：

1. 在子主题目录下创建js/custom-toggle.js，把上面的JS代码粘贴进去。
2. 在子主题的functions.php中添加以下代码：

function enqueue_custom_toggle_script() {
  wp_enqueue_script(
    'custom-toggle', // 脚本唯一标识
    get_stylesheet_directory_uri() . '/js/custom-toggle.js', // 脚本路径
    array('jquery'), // 依赖jQuery，WordPress会自动加载
    '1.0', // 版本号，方便缓存更新
    true // 放在footer加载，加快页面渲染速度
  );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_toggle_script');

核心注意事项 #

1. 绝对不要用重复ID：循环里的元素如果用同一个ID（比如#offers），jQuery只会选中第一个元素，这是你之前出问题的大概率原因。
2. 利用DOM层级关联：通过closest()和find()方法，确保每个触发操作只影响当前循环项内的目标元素，不会干扰其他项。
3. 兼容jQuery的noConflict模式：必须用(function($){ ... })(jQuery)包裹代码，或者直接用jQuery代替$。

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