使用jQuery隐藏元素并激活按钮：变量商品选品代码问题排查

咱们一步步来排查你的代码为什么没生效，从几个常见的问题点入手：

1. 先检查DOM选择器与结构的正确性 #

首先看你提供的代码，有几个明显的DOM问题：

• 重复的packages列表：你写了两个完全一样的<ul data-attribute_name="attribute_pa_packages">，这会让jQuery匹配到多个元素，操作逻辑混乱，先删掉重复的那个，只保留一个正确的套餐选项列表。
• HTML语法错误：第二个ul里的<li>多写了一个</li>闭合标签，这会破坏DOM结构，导致jQuery无法正确解析元素，先修复这个语法问题。
• 属性名拼写错误：脚本里的配送方式属性是attribute_pa_pickup-og-delivery，但看起来像是拼写错误（og应该是or？），你需要确认实际商品属性的slug是什么——在WooCommerce商品编辑页的属性设置里，slug是唯一标识，必须和脚本里的选择器完全匹配，否则脚本找不到目标元素，自然不会执行。

2. 确保脚本在DOM就绪后执行 #

你的脚本直接放在wp_head里，但WooCommerce的可变商品元素往往是动态渲染的，脚本运行时DOM可能还没加载完成，导致选择器找不到元素。解决方法是：

• 把脚本包裹在jQuery(document).ready()里，确保DOM完全加载后再执行逻辑；
• 把钩子从wp_head改成wp_footer，让脚本在页面底部加载，更稳妥。

修改后的PHP&脚本示例：

function custom_script_name(){?>
 <script>
 jQuery(document).ready(function($) {
   // 用$代替jQuery，更简洁（ready函数里传$参数，避免noConflict冲突）
   $(document).on('click', 'ul[data-attribute_name="attribute_pa_pickup-or-delivery"] li', function(){
     var selectedDelivery = $("ul[data-attribute_name='attribute_pa_pickup-or-delivery']").find("li.selected").attr("data-value");
     var pickupPackage = $("ul[data-attribute_name='attribute_pa_packages'] li[data-value='pickup']");

     if (selectedDelivery === "pickup"){
       // 给pickup选项添加选中类
       pickupPackage.addClass('selected');
       // 触发WooCommerce的专属事件，让系统识别选中状态并更新价格
       $("ul[data-attribute_name='attribute_pa_packages']").trigger('woocommerce_variation_select_change');
       // 隐藏pickup选项
       pickupPackage.hide();
     } else {
       // 切换到配送时，恢复pickup选项的状态（可选，根据需求调整）
       pickupPackage.show().removeClass('selected');
       $("ul[data-attribute_name='attribute_pa_packages']").trigger('woocommerce_variation_select_change');
     }
   });
 });
 </script>
<?php }
add_action('wp_footer', 'custom_script_name');

3. 用事件委托处理动态元素 #

如果你的商品选项是通过AJAX动态加载的（比如分页加载商品、刷新商品数据），普通的.click()绑定会失效，因为绑定事件时元素还不存在。这时候要用事件委托（$(document).on('click', 选择器, 函数)），就像上面示例里写的那样，确保不管元素什么时候生成，点击事件都能被捕获。

4. 触发WooCommerce的专属事件更新价格 #

单纯给选项添加selected类可能不足以触发价格计算——WooCommerce需要特定事件来更新可变商品的价格和库存信息。所以我们在修改选中状态后，要触发woocommerce_variation_select_change事件，让系统重新计算并展示价格。

5. 检查浏览器控制台的错误提示 #

打开浏览器开发者工具（按F12），切换到「Console」标签，看看有没有JavaScript错误：

• 如果出现$ is not defined：这是因为WordPress默认启用了jQuery的noConflict模式，不能直接用$，解决方法就是像示例里那样，在ready函数里传入$参数；
• 如果出现「找不到元素」的错误：那就是选择器不匹配，回到第一步检查属性名和DOM结构。

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