在Shopify液体中使用javascript变量

Question

我正在尝试在图像标记中使用JavaScript变量，但它不起作用。

我想在一个开发项目中为我的集合创建一个过滤器，在那里我可以通过产品的纹理过滤产品。我已经编写如下：

<div class="collection-filter-navbar-nav"> 
{% assign tags = 'white, yellow, golden' | split: ',' %} 
<ul class="fabric-filter"> 
<li><a href="javascript:void(0);" >All</a></li> 
{% for t in tags %} 
{% assign tag = t | strip %} 
{% if current_tags contains tag %} 
<li><a href="javascript:void(0);" data-value="{{ tag | handle }}" >{{ tag }}</a></li> 
{% elsif collection.all_tags contains tag %} 
<li><a href="javascript:void(0);" class="filter-lists" data-value="{{ tag | handle }}">{{ tag }}</a></li> 
{% endif %} 
{% endfor %} 
</ul> 
</div> 

的HTML被显示在前端，但我需要什么，我想在每个标签中添加引用的纹理图像标记名称。

所以我的脚本：

jQuery(document).ready(function(){ 
var filter_tabs = jQuery('.fabric-filter > li > a.filter-lists'); 
    jQuery.each(filter_tabs, function(index, element){ 
    var data_value = jQuery(this).data('value'); 
    {% assign value = data_value %} 
    var img_append = '<img src="{{ 'f1-'+value+'.png' | asset_url }}">' 
    jQuery(img_append).appendTo(jQuery(this)); 
    console.log(data_value); 
    }); 
    }); 

但它显示错误。我知道这可以通过CSS来完成，但我只是为了动态而使用javascript。

Answer 1

你将无法做到这一点，因为液体代码都运行在jquery代码之前。

由正在运行jQuery的液体已经输出的线{% assign value = data_value %}