Forループ内の画像をクリックするとDivを表示するJavascript

Question

私の現在の視野には、ブログの各写真（&タイトル）が表示されます。これはFORループを使用して行います（下記参照）。個々のブログ投稿の写真をクリックすると、DIVが短い発言で開かれるようにしたいと思います。&ブログタイトル。私は完全に失われています、助けてください！あなたは、単に（コンテナ内）の各IMGの背後に隠された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

：

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

のビットを追加します