用它的 ALT 链接图像答案

【问题标题】：Linking images with its ALT用它的 ALT 链接图像
【发布时间】：2017-04-04 06:23:58
【问题描述】：

我在 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>

【问题讨论】：

不要使用“alt”标签来交换图像，而是给图像一个“类”，然后用它来隐藏/显示。
@HymnZ 你介意给我举个例子吗？谢谢！

标签： javascript jquery html css shopify

【解决方案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 属性值相同

【讨论】：