JavaScript onerror在Shopify Liquid脚本中不起作用

Question

我创建了一个脚本，该脚本循环遍历集合中的所有标签，并显示子类别div，其中包含子类别/标签的图像+ h3标题。

我上传到主题文件夹中的图像，并构造了资产文件夹/集合句柄/标签句柄+ .png的URL

问题是我有一些标签不想显示为子类别，因此我检查加载图像是否存在错误，如果可以，我会隐藏图像以及title / h3标签，但是JavaScript根本行不通。

任何想法如何解决这个问题？？？

{% unless current_tags %}
      {% capture col_url%}{% if collection.url.size == 0 %}/collections/all{%else%}{{collection.url}}{%endif%}{%endcapture%}
      {% if collection.all_tags.size > 0 %}
        <div class="grid text-center">
          {% for tag in collection.all_tags %}
              {% capture file_name %}{{ collection.handle }}-{{ tag | handle }}.png{% endcapture %}
              {% capture alt_attr %}{{ collection.title | escape }}-{{tag | handle}}{% endcapture %}
              <div class="grid-item large--one-eighth medium--one-third" id="{{ collection.handle }}-{{ tag | handle }}-div">
                <a href="{{col_url}}/{{tag | handle}}">
                  <img src="{{ file_name | asset_url }}" alt="{{ alt_attr }}" id="{{ collection.handle }}-{{ tag | handle }}-img">
                </a>
                  <h3 id="{{ collection.handle }}-{{ tag | handle }}-h3">{{ tag | link_to_tag: tag }}</h3>
              </div>
          <script>
            document.getElementById("{{ collection.handle }}-{{ tag | handle }}-img").onerror = function(){
                document.getElementById("{{ collection.handle }}-{{ tag | handle }}-h3").style.display = "none";
                document.getElementById("{{ collection.handle }}-{{ tag | handle }}-img").style.display = "none";
            }                 
          </script>
          {% endfor %}
        </div>
      {% endif %}
{% endunless %}

Answer 1

我通过在image onerror属性中编写JavaScript来修复它，这是我的代码：

<img src="{{ file_name | asset_url }}" alt="{{ alt_attr }}" id="{{ collection.handle }}-{{ tag | handle }}-img" onerror="this.onerror = null;this.parentElement.parentElement.style.display = 'none'">

但是我仍然想弄清楚问题的初衷。