当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Javascript to Display Div on Click of image inside of For Loop

问题描述:

On my current sight I have a blog page that just display each individual blog post's Photo & Title. It does this by using a FOR loop (as seen below). I would like to make it so that when you click each indiviudal Blog Post's Photo, it would open a DIV with a short exerpt & Blog Title. I am completely lost, any help please!

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

网友答案:

You can simply add a hidden div behind each img ( in a container):

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

Now you simply add a bit of 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: