Javascript 在Shopify产品页面上隐藏变体缩略图

我已经在Shopify商店为我的产品建立了一个色样选择器。选择器工作完美，除了一个问题-我想隐藏其他颜色变化图像缩略图时，一种颜色被选中。我已经在页面加载时将其隐藏，但当选择其他颜色/尺寸时，这会中断

问题： 选择器当前选择通过图像的alt文本分配给每个产品的图像-我现在通过不同的方法上载产品，不再允许我手动将图像alt文本分配给每个图像

解决方案： 调整选择器以选择分配给产品颜色变体的图像，而不是通过图像alt文本。这样，图像将仅对所选颜色变体可见

任何帮助都将不胜感激；多谢各位

theme.js

产品模板.液体

{%form'product'，product，class:form_class，novalidate:'novalidate'，数据产品表单：'%}
{%除非product.has\u仅\u默认值\u变量%}
{product.options_中的选项的百分比，值为%}
{%if option.name==“color”%}
{{option.name}
{%assign index=forloop.index%}
{%用于选项中的值。值%}
{%endfor%}
{%else%}
{{option.name}
{option.values%%中的值为%
{{value}}
{%endfor%}
{%endif%}
{%endfor%}
{%end除非%}

[！[产品清单][3][3]

_filterThumbnails: function(variant){
  
  if(variant.featured_image != null && variant.featured_image.alt != null){
    
    $('[data-thumbnail-color]').hide();
    
    //show thumbnails for selected color
    
    var selected_color = variant.featured_image.alt;
    var thumbnail_selector = '[data-thumbnail-color="' + selected_color + '"]';
    $(thumbnail_selector).show();
  }
  
  else {
   
    //show all thumbnails
    $('[data-thumbnail-color]').show();     
  }
  
},

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">  

                    {%if option.name == "Colour"%}

                    <label>{{option.name}}</label>
                    {%assign index = forloop.index %}

                    <div class="variant-swatches">
                      {%for value in option.values%}
                      <input class="single-option-selector-{{ section.id }}" id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
                      <label for="color-{{forloop.index}}">
                      <img src="{{ value | escape | strip | downcase | replace: ' ', '-' | append: '.png' | asset_img_url: '300x' }}"/>
                      </label>
                      {%endfor%}
                    </div>
                    {%else%}

                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>                   

                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                    {%endif%}
                  </div>
                {% endfor %}
              </div>
            {% endunless %}