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液体已经输出了行public abstract class NoResubmitAbstract { public Guid PreventResubmit { get; set; } public void SetPreventResubmit(Guid prs) { PreventResubmit = prs; } }

在Shopify液体中使用javascript变量

1 个答案: