在 For 循環內單擊圖像時顯示 Div 的 Javascript

Question

在我目前的視線中，我有一個博客頁面，只顯示每個博客文章的照片和標題。 它通過使用 FOR 循環（如下所示）來做到這一點。 我想讓它當你點擊每個單獨的博客帖子的照片時，它會打開一個帶有簡短摘錄和博客標題的 DIV。 我完全迷路了，請任何幫助！

{% for article in blog.articles %}
{% unless article.tags contains 'exclude' and current_tags == blank %}
<div class="grid__item large--one-third small--one-whole {% cycle 'one-blog', 'two-blog', 'three-blog' %}" id="article-{{ article.id }}" data-alpha="{{ article.title }}" style="margin-bottom:50px;">   
  <div class="article-info"> 
    <div class="article-info-inner">
      <a href="{{ article.url }}"> <img src="{{ article.image.src | img_url: 'large' }}"></a>
      <span class="post-excerpt" style="    font-size: 0.8em;  margin-bottom: 0.8em;  display: block; margin-top: 1em;">
        {{article.excerpt | strip_html | truncatewords: 30}}
      </span>
      <h2 class="blog_title" style="text-align: center;"><a href="{{ article.url }}">{{ article.title }}</a></h2>
    </div>
  </div>
</div>
{% endunless %}
{% endfor %} 

Answer 1

您可以簡單地在每個 img 后面（在容器中）添加一個隱藏的 div：

<div> the container
 <img> the img
<div style="display:none">Hi</div> the hidden content
</div>

現在你只需添加一點js

<script>
window.onload=function(){
  var imgs=document.getElementsByTagName("img");
  for(var pos=0;pos<imgs.length;pos++){
   img=imgs[pos];
   img.onclick=function(){
     this.parentNode.childNodes[1].style.display="block";
   };
   }
 };
</script>