2017-06-14 33 views
0

我創建了一個腳本,它循環顯示集合中的所有標記,並顯示帶有子類別/標記的圖像+ h3標題的子類別div。JavaScript onerror在Shopify Liquid腳本中不起作用

我上傳到我的主題資產文件夾,我構建的資產文件夾/收藏手柄/標籤手柄的URL的圖像+巴紐

的問題是,我有一些標籤,我不想要顯示爲子類別,因此我檢查加載圖像時是否有錯誤,如果是這樣,我隱藏圖像加標題/ 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 %} 

回答

0

我通過的onerror屬性圖像中編寫的代碼是固定的,這裏是我的代碼:

<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'"> 

但我還是想弄清楚的問題是排在首位。