Javascript 修复woocommerce产品属性的jquery

我为产品颜色编写了这个jquery代码，它包括照明和加热。选择颜色时，颜色代码和名称将显示在产品标题下方，相关的照明和加热属性仅显示/突出显示。其余的数字是隐藏的

jQuery(document).ready(function( $ ){
 $('.variable-items-wrapper.color-variable-wrapper li').on('click',function(){
    $( ".selected-color" ).remove();
     var title = $(this).attr('title');
      var color = $(this).attr('data-value');
     $('.product_title').after('<div class="selected-color"><span class="color-name">'+title+': #'+color+' </span>');
   });
   $('ul[data-attribute_name="attribute_lighting-stability"] li').on('click',function(){
    $( ".selected-light" ).remove();
      var light = $(this).attr('data-value');
     $('.product_title').after('<div class="selected-light"><span class="light-name">Lighting Stability: '+light+' </span>');
   });

   $('ul[data-attribute_name="attribute_heat-resistance"] li').on('click',function(){
    $( ".selected-heat" ).remove();
      var heat = $(this).attr('data-value');
     $('.product_title').after('<div class="selected-heat"><span class="heat-name">Heat Resistance: '+heat+' </span>');
   });

   $('ul[data-attribute_name="attribute_lighting-fastness"] li').on('click',function(){
    $( ".selected-fitness" ).remove();
      var fitness = $(this).attr('data-value');
     $('.product_title').after('<div class="selected-fitness"><span class="heat-name">Lighting Fastness: '+fitness+' </span>');
   });

   $('ul[data-attribute_name="attribute_heat-stability"] li').on('click',function(){
    $( ".selected-stability" ).remove();
      var stability = $(this).attr('data-value');
     $('.product_title').after('<div class="selected-stability"><span class="heat-name">Heat Stability: '+stability+' </span>');
   });
});

jQuery（文档）.ready（函数（$）{
$（'.variable-items-wrapper.color-variable-wrapper li'）。在（'click'，function（）上{
$（“.selected color”）.remove（）；
var title=$（this.attr（'title'）；
var color=$（this.attr（'data-value'）；
$（'.product_title'）。在（''+title+''：#'+color+''）之后；
});
$（'ul[data-attribute\u name=“attribute\u lighting-stability”]li'）。在（'click'，function（）上{
$（“.selected light”）.remove（）；
var light=$（this.attr（'data-value'）；
$（'产品名称'）。在（'光照稳定性：'+光照+''）之后；
});
$（'ul[data-attribute\u name=“attribute\u耐热性”]li'）。在（'click'，function（）上{
$（“.selected heat”）.remove（）；
var heat=$（this.attr（'data-value'）；
$（'产品名称'）。在（'耐热性：'+耐热性+''）之后；
});
$（'ul[data-attribute\u name=“attribute\u lighting-security”]li'）。在（'click'，function（）上{
$（“.selected fitness”）.remove（）；
var fitness=$（this.attr（'data-value'）；
$（'产品名称'）。在（'耐光性：'+适合性+''）之后；
});
$（'ul[data-attribute\u name=“attribute\u heat-stability”]li'）。在（'click'，function（）上{
$（“.selected stability”）.remove（）；
var稳定性=$（this.attr（'data-value'）；
$（'产品名称'）。在（'热稳定性：'+稳定性+''）之后；
});
});

最近我更改了属性的名称并添加了新的颜色，因此jquery不再工作

耐光稳定性变为耐光牢度 耐热性变为热稳定性

此外，并非所有产品变体都能正确显示产品图像。除了黄色

请帮助修复jquery并找到显示变体图像的解决方案