求助：我的JavaScript仅在首个WooCommerce产品变体上生效

问题描述 #

我在functions.php中编写的JavaScript代码功能正常，但仅在第一个产品变体上生效。尝试重新加载后优先打开第二个变体，问题仍未解决，该代码在每个产品的首个变体上均可正常运行，需要调试。

原代码：

add_action('admin_footer', 'script');
function script()
{
    ?>
    <script>
        jQuery(function ($) {
            jQuery('#woocommerce-product-data').on('woocommerce_variations_loaded', function () {
                jQuery(this).find('.woocommerce_variation').each(function () {
                    jQuery("#dp").keydown(function () {
                        var cost = document.getElementById("cost").value;
                        var dp = document.getElementById("dp").value;
                        console.log(dp);
                    });
                });
            });
        });

    </script>


    <?php

}

问题原因 #

核心问题是ID选择器的唯一性：页面中ID必须是唯一标识，document.getElementById()和jQuery("#dp")只会匹配页面中第一个拥有该ID的元素，因此只有首个变体里的输入框会触发事件。

每个WooCommerce变体都是独立容器，里面的输入框应该用类选择器标识，再通过当前变体容器的上下文定位元素，避免全局匹配冲突。

修正后的代码 #

add_action('admin_footer', 'script');
function script()
{
    ?>
    <script>
        jQuery(function ($) {
            // 监听变体加载完成事件
            $('#woocommerce-product-data').on('woocommerce_variations_loaded', function () {
                // 遍历每个变体容器
                $(this).find('.woocommerce_variation').each(function () {
                    // 限定当前变体为上下文，绑定keydown事件到类为dp的输入框
                    $(this).find('.dp').on('keydown', function () {
                        // 从当前变体容器内获取cost输入框的值
                        var cost = $(this).closest('.woocommerce_variation').find('.cost').val();
                        var dp = $(this).val();
                        console.log(dp);
                    });
                });
            });
        });
    </script>
    <?php
}

关键修改点 #

• 将输入框的IDdp、cost改为对应的类名.dp、.cost（需确保变体输入框的HTML属性为class="dp"和class="cost"）
• 用$(this).closest('.woocommerce_variation').find('.cost')限定只在当前变体容器内查找元素，避免跨变体匹配
• 事件绑定改为在当前变体上下文内查找.dp元素，确保每个变体的输入框都能触发事件

内容的提问来源于stack exchange，提问作者Hareem Vekriwala