Question

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

2018-10-17

1987

jquery html woocommerce

我这里有这个 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();
});

我尝试检查是否单击了选项卡。如果是，我将触发单击选项卡内部的 a。但是我在加载页面时收到错误：

Uncaught RangeError: Maximum call stack size exceeded
at String.replace ()
at Function.trim (jquery.js?ver=1.12.4:2)
at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
at n (jquery.js?ver=1.12.4:2)
at HTMLLIElement. (custom.js?ver=4.9.8:77)
at HTMLLIElement.dispatch (jquery.js?ver=1.12.4:3)
at HTMLLIElement.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at 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();
});