Jump to content

Array of divs

Morsusy2k

By Morsusy2k
in JavaScript

 Share

Recommended Posts

Morsusy2k Newbie

Morsusy2k

Posted
Posted (edited)

I have 10 divs with pictures,named picture1,picture2,...,picture10.

And I have 10 divs with info on these pictures,named info1,info2,..,info10.

Is it possible to do something like this:

var pictures = [ "#picture1,..,#picture10];var info = ["#info1",...,"#info10"];jQuery.each(pictures, function() { $(pictures).click(function(){//info with same index$(info).fadeIn(200); });});

Instead of doing this 10 times:

$("#picture1").click(function(){    $('#info1').fadeIn(200);});

I hope you understand what I meant to say :D

Thanks.

Edited by Morsusy2k
Link to comment
Share on other sites
Morsusy2k Newbie

Morsusy2k

Posted
  • Author
Posted (edited)

I thought it would be simple. But there is something wrong again,look:

var pictures = [ "#picture1", "#picture2", "#picture3", "#picture4", "#picture5", "#picture6", "#picture7", "#picture8", "#picture9", "#picture10" ];var info = [ "#roll1", "#roll2", "#roll3", "#roll4", "#roll5", "#roll6", "#roll7", "#roll8", "#roll9", "#roll10" ];			alert(pictures[1]);  			alert(info[1]);                        //these alerts works		for(i = 0; i < pictures.length; i++) {  	  		$(pictures[i]).click(function(){  	  			alert(pictures[i]);  	  			alert(info[i]);                                //these dont :S                                //output is 'undefined'        	        $(info[i]).show();                      	});		}
Edited by Morsusy2k
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Oh, wait. this is event handler, the value of i gets lost after the event handlers have been assigned.

 

There are many possible solutions, but I guess best thing you can do is this:

for(i = 1; i <= 10; i++) {    $("#pictures" + i).click(function(){        $("#roll" + i).show();    });}
Link to comment
Share on other sites
Morsusy2k Newbie

Morsusy2k

Posted
  • Author
Posted (edited)

I suppose I don't need arrays anymore. Seems like its not working again :S

for(i = 1; i <= 10; i++) {    $("#pictures" + i).click(function(){	alert(i);        //this alert always outputs '11' :S        $("#roll" + i).show();    });}
Edited by Morsusy2k
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I made the same mistake again. "i" isn't set because the function isn't executed during the loop but later on. I think it's best to just do it without a loop for now.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

Try...

<!DOCTYPE html><html lang="en"><head><title>assign handlers</title><style>img{width:200px;}.hidden{display:none;}.imgblk{float:left;width:220px;text-align:center;border:1px dotted grey;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>var pictures = ["picture1","picture2","picture3"];$(function(){for(var i=0 ; i < pictures.length ; i++) {var p = document.getElementById(pictures[i]);p.onclick = fadeininfo;}function fadeininfo(){var me = '#info'+ this.id.substr(7);//"picture" is 7 chars long$(me).fadeIn(2000);}});</script></head><body><div class="imgblk"><img src="http://battellemedia.com/images/book_open-3.jpg" id="picture1" alt="img1"/><div id="info1" class="hidden"><p>This is the info for picture 1</p></div></div><div class="imgblk"><img src="http://battellemedia.com/images/book_open-3.jpg" id="picture2" alt="img1"/><div id="info2" class="hidden"><p>This is the info for picture 2</p></div></div><div class="imgblk"><img src="http://battellemedia.com/images/book_open-3.jpg" id="picture3" alt="img1"/><div id="info3" class="hidden"><p>This is the info for picture 3</p></div></div></body></html>
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted (edited)

or use a closure

for(var i = 1, l = 10; i <= 10; i++){   (function(idx){    $('#picture' + idx).click(function(){      $('#info' + idx).fadeIn(200);    });  }(i)); }
Edited by thescientist
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Use group index of class name of picture container, to reference info class and as long as info class container is in same order you can place them anywhere

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />    <title>Document Title</title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>    <script type="text/javascript">        $(function(){            $('.picture').click(function(){                $('.info').hide();                $('.info').eq($('.picture').index(this)).fadeIn(200);                 });            });    </script>    <style type="text/css">    .info{display:none;}    </style></head>    <body>        <div class="picture"><img src="../images/pic1.jpg" alt="" /></div>        <div class="info">pic 1</div>        <div class="picture"><img src="../images/pic2.jpg" alt="" /><div class="info">pic2</div></div>        <div class="picture"><div class="info">pic3</div><img src="../images/pic3.jpg" alt="" /></div>       <div class="picture"><img src="../images/pic4.jpg" alt="" /></div>         <div class="info">pic4</div>     </body></html>
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...