Jquery 不适用于 Woocommerce 产品变体说明

Question

我有两个 wooCommerce 产品变体下拉列表：Range 和 Textures。用户必须从下拉列表中选择一个选项，并在 PHP 中的 <p class="cdesc"></p> 中回显。默认情况下，这些值设置为空，并且当它被填充一个值时。它在 css 中产生问题。因此，当值显示在本节中时。我想更改<div class="tooltip-help">的CSS

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

});