WooCommerce jQuery 冲突答案

【问题标题】：WooCommerce JQuery ConflictWooCommerce jQuery 冲突
【发布时间】：2016-04-11 11:43:38
【问题描述】：

以下 jQuery 在我的任何基本模板页面上都可以正常工作：

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

});

但是，这似乎不适用于我的 WooCommerce 单一产品页面。它应该允许用户使用以下 HTML 单击选项卡式内容：

<ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Product Description</li>
        <li class="tab-link" data-tab="tab-2">Product Specification</li>
        <li class="tab-link" data-tab="tab-3">Delivery</li>
</ul>
<div id="tab-1" class="tab-content current">
    <?php the_content(); ?>
</div>
<div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

我假设这与 WooCommerce 的 jQuery 存在某种冲突，但我不确定如何解决此问题。这是带有标签内容的单个产品的链接：http://sg09.co.uk/product/a-product/。任何帮助将不胜感激：]

【问题讨论】：

可以参考这里的jQuery.noConflict()方法：api.jquery.com/jquery.noconflict
在你的 general.js 添加 $ = jQuery.noConflict();
@MukeshPanchal 我试过 jQuery.noConflict 方法，不幸的是没有运气。
能否请您在 wp_footer() 之后的页脚中添加 general.js 并查看它的工作情况
我已经尝试过上述代码并且它可以工作......问题是你的控制台上有错误......

标签： jquery wordpress woocommerce

【解决方案1】：

您能否在此文件 /wp-content/themes/lemon-fencing/js/general.js 的第一行添加以下代码，看看它是否有效：

$ = jQuery.noConflict();

【讨论】：

@Leon Burman 你也可以请添加“slick”库文件这样它就不会出错
我同意@Mukesh Panchal，因为这样做，您还可以在wordpress 中使用简写$ 代替jQuery。

【解决方案2】：

试试这个，看看它是否有效：

jQuery(document).ready(function(){
    jQuery('ul.tabs li').click(function(){
        var tab_id = jQuery(this).attr('data-tab');
        jQuery('ul.tabs li').removeClass('current');
        jQuery('.tab-content').removeClass('current');
        jQuery(this).addClass('current');
        jQuery("#"+tab_id).addClass('current');
    });

});

【讨论】：

我已经尝试了上述方法并使用了无冲突方法，但似乎没有任何区别。我真的坚持这个。

【解决方案3】：

许多插件作者和主题开发者都意识到了这一点，为了安全起见，他们使用 'jQuery' 而不是 '$'。

/* Normal jQuery you see everywhere */
$("#ele").jquerymethod();

/* "Safe" jQuery you see in WordPress */
jQuery("#ele").jquerymethod();

在您的情况下，您也可以通过这种方式使用 jquery：

jQuery(document).ready(function( $ ) {      
    $('ul.tabs li').click(function(){
       var tab_id = $(this).attr('data-tab');
       $('ul.tabs li').removeClass('current');
       $('.tab-content').removeClass('current');
       $(this).addClass('current');
       $("#"+tab_id).addClass('current');
    });     
});

【讨论】：