我有一个JavaScript代码片段，我想添加到我的WordPress+WooCommerce网站：

$(document).ready(function() {

  $(\'.input-text\').on(\'input\', function() {

    var valueLength = $(this).val().length;

    if (valueLength > 0) {
      $(this).closest(\'.form-row\').addClass(\'display-floating-label\');
    } else {
      $(this).closest(\'.form-row\').removeClass(\'display-floating-label\');
    }

  });

});

如果字段的文本输入不是空的，这个JS会向WooCommerce签出字段添加一个自定义类。

如何将此JS添加到我的网站？

我的主题OceanWP提供了一个添加自定义JS的位置Appearance > Customize > Custom CSS/JS 但将其添加到自定义JS文本框中不起作用。

我还尝试下载了Header/Footer scripts 插件并将其添加到标题中，但这也不起作用。

我还尝试将其添加到functions.php 提交了一系列不同的方式，但我也没有运气。

下面是一个功能完整的示例，其HTML代码与WooCommerce签出字段的HTML代码完全相同：JSFiddle. 它在小提琴中工作得很好，因此JS中的类是正确的，将其添加到我的网站应该是可行的，但事实并非如此。

我唯一不明白的是<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 在HTML代码中。我需要在我的网站的任何地方添加此内容吗？

我被困住了，任何帮助都将不胜感激。

function load_your_scripts() {

    wp_enqueue_style( \'style-name\', get_stylesheet_uri() ); // Used for loading stylesheets

    wp_enqueue_script( \'script-name\', get_template_directory_uri() . \'/WHEREVER/YOUR/FILE/IS/example.js\', array(), \'1.0.0\', true ); // Used for loading scripts

}
add_action( \'wp_enqueue_scripts\', \'load_your_scripts\' );