javascript - 将图像与其 ALT 链接

Question

我在 Shopify 的产品页面上工作，我的产品有 11 个变体，所以我只想显示所选变体的图像。现在，除了当我单击不同的变体时，我的一切都正常工作，缩略图不会改变(虽然主图像会改变)，Initially: Green Variant , Change to Red Variant
我已经使用它的 ALT 深度链接了我的产品变体图像，所以当我单击颜色“红色”时，只有具有 ALT“红色”的图像会显示在缩略图中，所以我猜我应该使用相同的概念来切换图片，我已经解决了，但我无法在最后一部分获得变体图片链接，如果你知道如何做，请帮忙，提前谢谢你。

$(function() {
  if($(".product-single__thumbnails").length) {
  $(".product-single__thumbnails").each(function(i) {
       var $thisSelect = $(this);
       $thisSelect.find("img").each(function() {
         var $this = $(this);
         $this.attr('src', 'IMAGES IN PRODUCT VARIATION THAT HAVE THE SAME ALT');
});
   });
        }
                });

最后，由于每个变体我有 3 张图片，它们都具有相同的 ALT，我如何将每张图片放在 3 个不同的缩略图中，而不是让其中一张重复 3 次？谢谢!

这是我的缩略图的代码:

 <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">

            {% assign featured_alt = product.selected_or_first_available_variant.option1 %}           
            {% for image in product.images %} 
            {% if image.alt == featured_alt or image == featured_image %}

              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
                <a
                  href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}" id="thumbnaillinkid"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                    <img class="product-single__thumbnail-image" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>

Answer 1

将图片元素改成这个

<img class="product-single__thumbnail-image {{ image.alt | handleize }}" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">

显示/隐藏基于颜色的图像/缩略图的函数如下所示

$(document).on('click','<.palette_holder_class> <.palette_element_class>',function(){
    var color = '.product-single__thumbnail-image.'+$(this).attr('thumb_color')
    $('.product-single__thumbnail-image').css('display','none')
    $(color).css('display','')
});

{{ image.alt | handleize }} 应与 thumb_color 属性值相同