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); 

});