Javascript 从活动类中获取值并假定为另一个

我在一个使用液体的产品配置器上工作。 Liquid使用标记、对象和过滤器的组合来加载动态内容

每个产品都有两个配置选项。颜色和材料。 这两个选项都显示为可单击的样例。 我们希望添加这样的效果，即材质样例将背景颜色更改为选定颜色变体的颜色

在这里举行：

样本。液体：

{% if swatch == blank %}
{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
    <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% unless found_option %}
{% else %}
<div class="swatch clearfix swatch-{{swatch}}" data-option-index="{{ option_index }}">
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}

      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}">
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %}/>
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
        </label>
        {% else %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}">
          {{ value }}
        </label>
        {% endif %}
      </div>
    {% endunless %}

  {% endfor %}
</div>

{% endunless %}

{% endif %}

<script> 
  var mat = jQuery(".swatch.clearfix.swatch-Material");
  var colors = jQuery(".swatch-element.color");

  var colChanger = function() {
    mat.css("background-color", jQuery(this).css("background-color"));  
  };

  colors.each(function(e) { jQuery(this).click(colChanger); });
  mat.css("background-color", "#222");
</script>