[英]Loop through a HTML code block with different variables
我試圖進行循環操作,以免一直為包含8張照片的Instagram小部件重寫代碼。 每個循環都有其自己的編號(例如,fe theme.instagram_img_1到theme.instagram_img_8)。但是,涉及到外部變量會在循環中造成問題。
{% if theme.instagram_img_1 %}
<div class="col-12 col-sm-6 col-lg-3 pb30">
<a href="{{ theme.instagram_url_1 }}">
<figure>
<div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div>
<img src="{{ 'img-instagram-img-1.jpg' | url_asset }}" width="100%">
</figure>
</a>
</div>
{% endif %}
{% if theme.instagram_img_2 %}
<div class="col-12 col-sm-6 col-lg-3 pb30">
<a href="{{ theme.instagram_url_2 }}">
<figure>
<div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div>
<img src="{{ 'img-instagram-img-2.jpg' | url_asset }}" width="100%">
</figure>
</a>
</div>
{% endif %}
我希望循環總共進行8次。 到目前為止,這是我想出的:
<div id="myHTMLWrapper"></div>
<script>
var wrapper = document.getElementById("myHTMLWrapper");
var myHTML = '';
for (var i = 0; i < 8; i++) {
myHTML += '{% if theme.instagram_img_' + (i + 1) + ' %}<div class="col-12 col-sm-6 col-lg-3 pb30">< a href = "{{ theme.instagram_url_1 }}" ><figure><div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div><img src="{{ 'img-instagram-img- ' + (i + 1) + '.jpg' | url_asset }}" width="100%"></figure></a></div>{% endif %}';
}
wrapper.innerHTML = myHTML
</script>
在這一行有一個錯誤:
myHTML += '{% if theme.instagram_img_' + (i + 1) + ' %}<div class="col-12 col-sm-6 col-lg-3 pb30">< a href = "{{ theme.instagram_url_1 }}" ><figure><div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div><img src="{{ 'img-instagram-img- ' + (i + 1) + '.jpg' | url_asset }}" width="100%"></figure></a></div>{% endif %}';
更改此:
< a href = "{{ theme.instagram_url_1 }}" >
對此:
< a href = "{{ theme.instagram_url_' + (i + 1) + ' }}" >
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.