如何为WooCommerce两个变体select绑定带值判断的onchange触发事件

问题排查与修复 #

1. 核心错误（if判断部分） #

你当前if条件里的val ==='acconto-saldo', val === 'partecipanti-1'使用了JavaScript的逗号运算符，这类运算符的执行逻辑是从左到右计算所有表达式，但最终只返回最后一个表达式的判断结果，等于你的条件实际等价于if(val === 'partecipanti-1')，完全忽略了第一个付款方式的判断，自然不符合预期。

2. 按业务需求修正条件 #

两种常见场景按需选择即可：

• 场景1：只要任意一个下拉框选中对应值就触发动画（逻辑或，用||）
  直接把if条件修改为：

  if (val === 'acconto-saldo' || val === 'partecipanti-1')
  

• 场景2：需要两个下拉框同时选中对应值才触发动画（逻辑与，用&&）
  你当前只获取了触发change事件的单个下拉框的值，需要调整取值逻辑：

  // 同时获取两个下拉框的选中值
  var payVal = $('select#pa_modalita-pagamento').val();
  var peopleVal = $('select#pa_partecipanti').val();
  if (payVal === 'acconto-saldo' && peopleVal === 'partecipanti-1')
  

3. 其他注意事项 #

• 你用到的transition()方法不属于原生jQuery的内置方法，要确认已经引入了jQuery Transit插件，否则会报方法不存在的错误
• 你已经在ready回调中声明了$别名，后续代码可以直接用$代替jQuery，减少代码冗余

完整修正代码（以场景1为例） #

jQuery(document).ready(function($){    
    var isDesktop = window.matchMedia("only screen and (min-width: 760px)");    
    if (isDesktop.matches) {
        $('select#pa_modalita-pagamento , select#pa_partecipanti').on('change', function() {
            var val = $(this).val();
            if (val ==='acconto-saldo' || val === 'partecipanti-1'){ 
                setTimeout(function(){ 
                    $(".woocommerce-variation-description").transition({ x: '0px', y: '80px' }); 
                }, 100);
            }
        });
    }
});

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