实现多Shortcode弹窗独立控制：解决JQuery同步开关问题

将弹窗与触发按钮封装为Shortcode后，页面添加2个及以上该Shortcode时，点击任意按钮会同时打开所有弹窗，关闭操作也会同时关闭所有弹窗。

原始代码 #

弹窗HTML（Shortcode内） #

<div class="popup-overlay">
  <div class="popup-content">
  <button class="close">X</button> 
  <div><?php echo do_shortcode('[contact-form-7 id="14801" title="PDF Download"]'); ?></div>
  <div class="download_link"><a href="<?php echo $a['dl_url']; ?>" download>Download</a></div>  
  </div>
</div>

触发按钮HTML（Shortcode内） #

<div class="download-brochure"><a class="open"><?php echo $a['dl_btn_title']; ?></a></div>

原始jQuery代码 #

<script>
jQuery(document).ready(function(){

jQuery(".open").on("click", function() {
    jQuery(".popup-overlay, .popup-content").addClass("active");
});

jQuery(".close").on("click", function() {
    jQuery(".popup-overlay, .popup-content").removeClass("active");
});

});
</script>

问题根源 #

原始代码使用通用类选择器（.open/.popup-overlay等），点击时会选中页面所有匹配的元素，导致批量触发弹窗的显示/隐藏。

优雅解决方案（支持任意数量Shortcode） #

无需写大量重复的if判断，通过两种方式实现按钮与弹窗的一对一关联：

方案1：利用DOM层级关联（推荐） #

修改Shortcode的HTML结构，将弹窗与按钮放在同一个父容器内：

<div class="popup-wrapper">
  <div class="popup-overlay">
    <div class="popup-content">
    <button class="close">X</button> 
    <div><?php echo do_shortcode('[contact-form-7 id="14801" title="PDF Download"]'); ?></div>
    <div class="download_link"><a href="<?php echo $a['dl_url']; ?>" download>Download</a></div>  
    </div>
  </div>

  <div class="download-brochure"><a class="open"><?php echo $a['dl_btn_title']; ?></a></div>
</div>

修改jQuery代码，通过父容器定位对应弹窗：

<script>
jQuery(document).ready(function(){
  // 打开弹窗：找到当前按钮所在的父容器，再选中容器内的弹窗元素
  jQuery(".open").on("click", function() {
    jQuery(this).closest(".popup-wrapper").find(".popup-overlay, .popup-content").addClass("active");
  });

  // 关闭弹窗：从关闭按钮向上找到父容器，再定位容器内的弹窗元素
  jQuery(".close").on("click", function() {
    jQuery(this).closest(".popup-wrapper").find(".popup-overlay, .popup-content").removeClass("active");
  });
});
</script>

方案2：使用数据属性关联 #

如果不想调整DOM结构，给按钮和弹窗添加对应的数据属性：

<!-- 弹窗代码 -->
<div class="popup-overlay" data-popup-id="<?php echo $a['dl_pop_id']; ?>">
  <div class="popup-content">
  <button class="close" data-popup-id="<?php echo $a['dl_pop_id']; ?>">X</button> 
  <div><?php echo do_shortcode('[contact-form-7 id="14801" title="PDF Download"]'); ?></div>
  <div class="download_link"><a href="<?php echo $a['dl_url']; ?>" download>Download</a></div>  
  </div>
</div>

<!-- 触发按钮代码 -->
<div class="download-brochure"><a class="open" data-popup-id="<?php echo $a['dl_pop_id']; ?>"><?php echo $a['dl_btn_title']; ?></a></div>

修改jQuery代码，通过数据属性匹配对应弹窗：

<script>
jQuery(document).ready(function(){
  // 打开弹窗
  jQuery(".open").on("click", function() {
    const popupId = jQuery(this).data("popup-id");
    jQuery(`.popup-overlay[data-popup-id="${popupId}"], .popup-content[data-popup-id="${popupId}"]`).addClass("active");
  });

  // 关闭弹窗
  jQuery(".close").on("click", function() {
    const popupId = jQuery(this).data("popup-id");
    jQuery(`.popup-overlay[data-popup-id="${popupId}"], .popup-content[data-popup-id="${popupId}"]`).removeClass("active");
  });
});
</script>

与现有方案对比 #

你当前通过逐个判断类名的方案虽然可行，但扩展性极差——Shortcode数量超过10个时需要继续添加重复代码。上述两种方案均支持任意数量的Shortcode调用，代码简洁且易于维护。

内容的提问来源于stack exchange，提问作者Francis Alvin Tan