带有 jQuery $('CLASS').on('click tap touchstart', function(event) 的 HTML 按钮在移动设备上不起作用 (Wordpress BricksBuilder)

Question

我已经使用一些建议编辑了上次发布此问题的代码，不幸的是，我链接到的“重复”也没有解决问题。这是我正在使用的代码：

<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 id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Plans</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">SEO</div>
<div id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Websites</div>

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

  $('.faq-btn').on('click tap touchstart', function(event) {
        event.preventDefault();
        if($(this).hasClass('pricing-btn')){

        $('.pricing-faq').show();
        $('.plans-faq').hide();
        $('.seo-faq').hide();
        $('.websites-faq').hide();
      
        $('.pricing-btn').css("background-color", "#a42d2f");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#fff");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('plans-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').show();
        $('.seo-faq').hide();
        $('.websites-faq').hide();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#a42d2f");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#fff");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('seo-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').hide();
        $('.seo-faq').show();
        $('.websites-faq').hide();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#a42d2f");
        $('.websites-btn').css("background-color", "#fff");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#fff");
        $('.websites-btn').css("color", "#a42d2f");

    } else if ($(this).hasClass('websites-btn')){

        $('.pricing-faq').hide();
        $('.plans-faq').hide();
        $('.seo-faq').hide();
        $('.websites-faq').show();

        $('.pricing-btn').css("background-color", "#fff");
        $('.plans-btn').css("background-color", "#fff");
        $('.seo-btn').css("background-color", "#fff");
        $('.websites-btn').css("background-color", "#a42d2f");
      
        $('.pricing-btn').css("color", "#a42d2f");
        $('.plans-btn').css("color", "#a42d2f");
        $('.seo-btn').css("color", "#a42d2f");
        $('.websites-btn').css("color", "#fff");
    }
});
  
});
</script>

这次我保留了所有代码，以防 jQuery 中的 CSS 更改以某种方式搞乱其他内容。

感谢任何帮助，非常感谢。如果需要，很乐意提供网站本身的链接，但我认为这可能违反规则？

谢谢。

Answer 1

考虑更高效的代码。

jQuery(document).ready(function($) {
  $(".brxe-container").hide();
  $('.faq-btn').on('click tap touchstart', function(event) {
    event.preventDefault();
    $(".brxe-container").hide();
    var target = $(this).text().trim().toLowerCase();
    $("." + target + "-faq").show();
    $('.faq-btn').removeClass("highlight").addClass("dim");
    $(this).toggleClass("dim highlight");
  });
});

.highlight {
  background-color: #a42d2f;
  color: #fff;
}

.dim {
  background-color: #fff;
  color: #a42d2f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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 id="brxe-bilrmd" class="brxe-container pricing-faq bricks-lazy-hidden">Pricing</div>
<div id="brxe-bilrmd" class="brxe-container plans-faq bricks-lazy-hidden">Plans</div>
<div id="brxe-bilrmd" class="brxe-container seo-faq bricks-lazy-hidden">SEO</div>
<div id="brxe-bilrmd" class="brxe-container websites-faq bricks-lazy-hidden">Websites</div>