单击色板时如何更改特色图像？

Question

任何人都可以帮助我为什么当我在收藏页面上选择变体时我的精选照片不会改变？？

https://strokes-test.myshopify.com/collections/frontpage

Javascript

initColorSwatchGrid: function() { 
jQuery('.item-swatch li label').click(function(){ 
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 
return false;
});
}

HTML

<ul class="item-swatch color_swatch_Value">  
{% for option in product.options %}
  {% if option == 'Shades' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}  
      {% assign text = color | handleize %}
      <li>
       <label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
        {% if variant.image != null %}
        <div class="hidden">
          <img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
        </div>
        {% endif %}
      </li>
        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
</ul>

注意我也在使用 jquery v1.8.1

Answer 1

需要更新JS代码才能正常工作，使用它

initColorSwatchGrid: function() {
   jQuery('.item-swatch li label').click(function () {
      var newImage = jQuery(this).next().find('img').attr('src');
      jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
      return false;
   });
}