javascript - 单击色板时如何更改特色图像?
问题描述
任何人都可以帮助我为什么当我在收藏页面上选择变体时我的精选照片不会改变?
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
解决方案
您需要更新 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;
});
}
推荐阅读
- azure-active-directory - 使用 Microsoft Graph Api 创建处于健康状态的域
- ios - iOS MeasurementFormatter中的零符号
- python-3.x - AttributeError:“str”对象没有属性“date”
- php - 警告:mysqli_connect(): (HY000/1049): Unknown database 'login' (但数据库存在)
- mysql - SELECT、GROUP BY 和 COUNT 查询
- python-3.x - Visual Studio 2019 中的 pip 包管理器(python 环境)
- python - 提取两个lxml标签Python之间的所有内容
- angular - Angular URLSearchParams 与 HttpParams
- pine-script - Pinescript - 将 Wells Wilders MA v2 转换为 v4
- sql - 填写缺失日期和分组问题