WordPress BricksBuilder中jQuery按钮点击事件移动端失效求助

已修改之前的代码，但重复问题的解决方案仍未生效，当前代码存在核心问题，修复后即可正常运行：

问题分析 #

1. HTML ID重复：所有内容容器使用了相同的id="brxe-bilrmd"，ID在HTML中必须唯一，会导致选择器异常。
2. 内容容器类名错误：所有div的类都是pricing-faq，无法与对应按钮的类（如plans-btn）匹配，JS无法正确定位要显示的容器。
3. JS逻辑冗余：通过大量if-else和直接修改style实现状态切换，代码冗余且难以维护。

修复后的完整代码 #

HTML部分 #

<button class="brxe-button main-cta-button pricing-btn faq-btn bricks-button bricks-background-primary">Pricing</button>
<button class="brxe-button main-cta-button plans-btn faq-btn bricks-button bricks-background-primary">Plans</button>
<button class="brxe-button main-cta-button seo-btn faq-btn bricks-button bricks-background-primary">SEO</button>
<button class="brxe-button main-cta-button websites-btn faq-btn bricks-button bricks-background-primary">Websites</button>

<div class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div>
<div class="brxe-container plans-faq bricks-lazy-hidden">Plans</div>
<div class="brxe-container seo-faq bricks-lazy-hidden">SEO</div>
<div class="brxe-container websites-faq bricks-lazy-hidden">Websites</div>

• 移除重复ID，给每个内容容器设置对应类名（如plans-faq对应plans-btn）。

CSS部分（推荐添加，替代JS直接修改样式） #

/* 激活状态样式 */
.faq-btn.active {
  background-color: #a42d2f !important;
  color: #fff !important;
}
/* 非激活状态样式 */
.faq-btn:not(.active) {
  background-color: #fff !important;
  color: #a42d2f !important;
}
/* 默认隐藏所有内容容器 */
.bricks-lazy-hidden {
  display: none;
}

• 使用CSS类控制按钮状态，比JS直接修改style更易维护，且符合语义化。

JavaScript部分 #

jQuery(document).ready(function($){
  // 初始化：默认显示第一个容器，激活第一个按钮
  $('.pricing-faq').show();
  $('.pricing-btn').addClass('active');

  $('.faq-btn').on('click tap touchstart', function(event) {
    event.preventDefault();
    
    // 重置所有按钮状态，隐藏所有内容容器
    $('.faq-btn').removeClass('active');
    $('.brxe-container[class$="-faq"]').hide();
    
    // 获取当前按钮对应的内容容器类名
    const targetClass = $(this).attr('class').match(/(\w+-btn)/)[0].replace('-btn', '-faq');
    
    // 激活当前按钮，显示对应内容容器
    $(this).addClass('active');
    $(`.${targetClass}`).show();
  });
});

• 简化逻辑，通过类名的对应关系（xxx-btn → xxx-faq）自动匹配容器，无需编写大量if-else。
• 初始化默认状态，确保页面加载后有默认显示的内容。

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