jquery不能在Woocommerce产品差异说明

Question

我得到了两个wooCommerce产品差异下拉列表：范围和纹理。用户必须从下拉菜单中选择一个选项，并在PHP中使用<p class="cdesc"></p>。默认情况下，这些值被设置为空，并且当它填充一个值时。它在CSS中创建问题。所以，数值显示在本节中。我想改变CSS的<div class="tooltip-help">

它工程罚款JsFiddle https://jsfiddle.net/33shjyf6/ 但不是在我的WordPress的网站。 http://www.feature-wallpaper.co.uk/product/lamborghini-aventador/

var $ = jQuery.noConflict(); 
 

 
var range = $('#pa_range'); 
 
var texture = $('#pa_texture'); 
 

 
var checkSelection = function() { 
 
    var rangeSelected = $("#pa_range option:selected")[0]; 
 
    var textureSelected = $("#pa_texture option:selected")[0]; 
 
    
 
    if (rangeSelected.index && textureSelected.index) { 
 
    $('p.cdesc').text('Range:' + rangeSelected.value + ' Texture:' + textureSelected.value); 
 
    } else { 
 
    $('p.cdesc').text(''); 
 
    } 
 
    
 
    if ($('p.cdesc').is(':empty')) { 
 
    $(".tooltip-help").css({ 
 
     "margin-top": "45px" 
 
    }); 
 
    } else { 
 
    $(".tooltip-help").css({ 
 
     "margin-top": "145px" 
 
    }); 
 
    } 
 
} 
 

 
range.change(checkSelection); 
 
texture.change(checkSelection);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tooltip-help" style="margin-top: 45px;"></div> 
 

 
<div class="variation-description"> 
 
    <p class="cdesc"></p> 
 
</div> 
 

 
<table class="variations" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="label"> 
 
     <label for="pa_range">Range</label> 
 
     </td> 
 
     <td class="value"> 
 
     <select id="pa_range" name="attribute_pa_range" data-attribute_name="attribute_pa_range"> 
 
      <option value="">Choose an option…</option> 
 
      <option value="selfstick" class="attached enabled">SELFSTICK</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label"> 
 
     <label for="pa_texture">Texture</label> 
 
     </td> 
 
     <td class="value"> 
 
     <select id="pa_texture" name="attribute_pa_texture" data-attribute_name="attribute_pa_texture"> 
 
      <option value="">Choose an option…</option> 
 
      <option value="canvas" class="attached enabled">Canvas</option> 
 
      <option value="cotton" class="attached enabled">Cotton</option> 
 
      <option value="smooth" class="attached enabled">Smooth</option> 
 
     </select> <a class="reset_variations" href="#reset" style="visibility: visible; display: inline;">Clear selection</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

WordPress的jQuery的格式不喜欢常规的jQuery看到这里why 下面是更新后的代码：

jQuery(document).ready(function($) { 

    var $ = jQuery.noConflict(); 

    var range = $('#pa_range'); 
    var texture = $('#pa_texture'); 

    var checkSelection = function() { 
     var rangeSelected = $("#pa_range option:selected")[0]; 
     var textureSelected = $("#pa_texture option:selected")[0]; 

     if (rangeSelected.index && textureSelected.index) { 
     $('p.cdesc').text('Range:' + rangeSelected.value + ' Texture:' + textureSelected.value); 
     } else { 
     $('p.cdesc').text(''); 
     } 

     if ($('p.cdesc').is(':empty')) { 
     $(".tooltip-help").css({ 
      "margin-top": "45px" 
     }); 
     } else { 
     $(".tooltip-help").css({ 
      "margin-top": "145px" 
     }); 
     } 
    } 

    range.change(checkSelection); 
    texture.change(checkSelection); 

});