在WooCommerce中将jQuery添加到单个产品页面的问题

我在WooCommerce单一产品页面上加载jQuery时遇到问题

我需要使用jQuery进行动态onclick更改：添加：

'border:xx-xx-xx'

到

.woocommerce-product-gallery\uu包装器

css类

我的代码：

Hook（放在WooCommerce functions.php中）：

add_action( 'woocommerce_after_single_product_summary', 'jquery_script_after_single_product_summary' );
function jquery_script_after_single_product_summary() {
    ?>
    <script type="text/javascript">
    //**START CHANGE FRAME PRODUCT PAGE**//
                    jQuery(document).ready(function() {
                  $("select.frame").change(function() {
                    var changeframe = $(this).children("option:selected").val();
                    $('.woocommerce-product-gallery__wrapper').css('border', changeframe);
                  });
                });
    //END CHANGE FRAME PRODUCT PAGE**//
    </script>
    <?php
}

    <select class="frame">
<option value="">Choose frame</option>
<option value="">Without frame</option>
            <option value="20px solid black">Red</option>
            <option value="20px solid blue">Blue</option>
            <option value="20px solid purple">Yellow</option>
        </select>

<br><br><br>
<figure class="woocommerce-product-gallery__wrapper"><img src="image.jpg"></div>

add_action（'woocommerce_在_single_product_summary之后，'jquery_script_在_single_product_summary之后）'）；
函数jquery\u脚本\u在单产品\u摘要（）之后{
?>
//**开始更改框架产品页面**//
jQuery（文档）.ready（函数（）{
$（“select.frame”）.change（函数（）{
var changeframe=$（this）.children（“选项：选中”）.val（）；
$（'.woocommerce-product-gallery\uuu wrapper'）.css（'border'，changeframe）；
});
});
//结束更改框架产品页**//
如果使用现有代码查看浏览器中的console选项卡，您将看到以下错误消息

延迟异常：$不是函数类型错误：$不是
作用


下面的代码将解决这个问题。HTML（下拉列表）的显示可以通过模板覆盖或所需的挂钩应用于页面上的任何位置

在这个答案中，我将两者结合在一起

单产品汇总后的功能动作{
//显示下拉列表
回声'
选择框架
无框架
红色
蓝色
黄色的
';
?>
jQuery（文档）.ready（函数（$）{
//改变
$（'select.frame'）.change（函数（）{
var changeframe=$（this）.children（'option:selected'）.val（）；
//调试
console.log（changeframe）；
//添加边框
$（'woocommerce-product-gallery__包装器'）.css（'border'，changeframe）；
});          
});
当您尝试“onchange”事件时，devtools控制台上是否有任何输出？（不具备WP技能，但这可能有助于了解问题所在）Holy moly。非常感谢。您刚刚击败了Google。