Question

我在这里有这个HTMl结构：

<li class="description_tab" id="tab-title-description" role="tab" aria-controls="tab-description">
      <a href="#tab-description">Description</a>
</li>

这是我的JS函数：

jQuery('body.woocommerce div.product .woocommerce-tabs ul.tabs li').click(function () {
    jQuery('a', this).click();
});

我试图做的是检查是否单击了选项卡。如果是这样，我将触发单击选项卡的内部。但是加载页面时出现错误：

未捕获的RangeError：超出了最大调用堆栈大小
          在String.replace（）
          在Function.trim（jquery.js？ver = 1.12.4：2）
          在新的a.fn.init（jquery-migrate.min.js？ver = 1.4.1：2）
          在n（jquery.js？ver = 1.12.4：2）
          在HTMLLIElement。（custom.js？ver = 4.9.8：77）
          在HTMLLIElement.dispatch（jquery.js？ver = 1.12.4：3）
          在HTMLLIElement.r.handle（jquery.js？ver = 1.12.4：3）
          在Object.trigger（jquery.js？ver = 1.12.4：3）
          在Object.a.event.trigger（jquery-migrate.min.js？ver = 1.4.1：2）
          在HTMLAnchorElement。（jquery.js？ver = 1.12.4：3）

怎么了？

Answer 1

这就是现在的工作方式。工作正常，但是有很多代码：

jQuery('body.woocommerce div.product .woocommerce-tabs ul.tabs li').click(function () {
        var description = jQuery('.woocommerce-Tabs-panel--description');
        var reviews = jQuery('.woocommerce-Tabs-panel--reviews');
        if (!jQuery(this).hasClass('active')) {
            if (jQuery(this).hasClass('reviews_tab')) {
                jQuery('.description_tab').removeClass('active');
                jQuery(this).addClass('active');
                description.hide();
                reviews.show();
            } else if (jQuery(this).hasClass('description_tab')) {
                jQuery('.reviews_tab').removeClass('active');
                jQuery(this).addClass('active');
                reviews.hide();
                description.show();
            }
        }
    });

我不知道我能否做得更好。

Answer 2

使用$(this)代替this

jQuery('body.woocommerce div.product .woocommerce-tabs ul.tabs li').click(function () {
    jQuery('a', $(this)).click();
});

WooCommerce中超出了最大调用堆栈大小

2 个答案: