Woocommerce自定义变体视图

我在产品页面上有一个自定义变体视图。这是一个简单的颜色框。我隐藏默认的wooccommerce变体选择并在点击框后更改：

jQuery('.colors-list li').on('click', function(event){
       if(!jQuery(this).hasClass('active')){
           //change active square
           jQuery('.colors-list .active').removeClass('active');
           jQuery(this).addClass('active');
           //change active color label
           var colorName = jQuery(this).attr('colorname');
           jQuery('.checked-color').html(colorName);
           //change value of hided woocommerce variable switcher
           var colorSlug = jQuery(this).attr('colorval');
           jQuery('#pa_color').val(colorSlug).change();
              jQuery('.variations_form').trigger('woocommerce_variation_select_change');
       }
    });

但是，一旦我只更改了一个select（color），由于这个原因，我在js（add_to_cart-variation.js）中出现了一个错误：

未捕获的类型错误：无法读取空的属性"length"

错误：

if ( $( this ).val().length === 0 ) .

如果我只有一个变化-错误不会发生。我试着将第二次选择的颜色更改为默认值，但没有任何改变。