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

【问题标题】：Maximum call stack size exceeded in WooCommerceWooCommerce 中超出了最大调用堆栈大小
【发布时间】：2018-10-17 11:54:27
【问题描述】：

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

怎么了？

【问题讨论】：

问题是因为您通过从元素上的单击事件引发元素上的单击事件来创建无限递归。 What I tried to do is to check if the tab was clicked. If this is true I will trigger the a inside of the clicked tab. But I'm getting an error when I load the page 你为什么要这么做？如果您想扩大a 元素的命中区域，我建议您改用 CSS。
在 Wordpress 中，a 元素有一个 click 功能，但 tab 没有。所以我不想只点击文本。当被包围的标签被点击时，我也会切换内容。
正如@RoryMcCrossan 建议的那样，CSS 可以更好地解决这个问题。最简单的解决方案：将a 设置为display: block; height: 100%; width: 100%;，并在a 中添加一个span 标签。然后将所有旧的a 样式更改为a span。
每个标签内的a的点击功能是什么？
重点是上面是标准的 WooCommerce 代码，我不想因为更新等而改变它。

标签： jquery html woocommerce

【解决方案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();
            }
        }
    });

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

【讨论】：

【解决方案2】：

使用$(this)，而不是this

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

【讨论】：

$(this) 和 this 在该上下文中的行为相同。
你知道 jQuery 是 WP 唯一正确的语法吗？