在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 %}