Javascript 在 For 循环内单击图像时显示 Div答案

【问题标题】：Javascript to Display Div on Click of image inside of For LoopJavascript 在 For 循环内单击图像时显示 Div
【发布时间】：2017-01-28 13:18:31
【问题描述】：

在我目前的视野中，我有一个博客页面，它只显示每篇博客文章的照片和标题。它通过使用 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 %}

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：