Question

在我目前看来，我有一个博客页面，只显示每个博客文章的照片＆amp;标题。它通过使用FOR循环（如下所示）来实现。我想这样做，当你点击每个个人博客文章的照片时，它会打开一个短暂的Der＆amp;博客标题。我完全迷了，请帮忙！

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

Javascript显示Div点击For循环内的图像

1 个答案: