Morsusy2k Posted October 11, 2013 Share Posted October 11, 2013 (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 Thanks. Edited October 11, 2013 by Morsusy2k Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2013 Share Posted October 11, 2013 An ordinary Javascript loop works for(i = 0; i < pictures.length; i++) { $(pictures[i]).click(function(){ $(info[i]).fadeIn(200); });} Link to comment Share on other sites More sharing options...
Morsusy2k Posted October 11, 2013 Author Share Posted October 11, 2013 (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 October 11, 2013 by Morsusy2k Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2013 Share Posted October 11, 2013 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 More sharing options...
Morsusy2k Posted October 11, 2013 Author Share Posted October 11, 2013 (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 October 11, 2013 by Morsusy2k Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2013 Share Posted October 11, 2013 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 More sharing options...
Morsusy2k Posted October 11, 2013 Author Share Posted October 11, 2013 Okay,thanks for trying Link to comment Share on other sites More sharing options...
davej Posted October 11, 2013 Share Posted October 11, 2013 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 More sharing options...
justsomeguy Posted October 11, 2013 Share Posted October 11, 2013 Something like this should work: for(i = 1; i <= 10; i++) { $("#pictures" + i).setAttribute('data-index', i); $("#pictures" + i).click(function(){ $("#roll" + this.getAttribute('data-index')).show(); });} Link to comment Share on other sites More sharing options...
thescientist Posted October 11, 2013 Share Posted October 11, 2013 (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 October 11, 2013 by thescientist Link to comment Share on other sites More sharing options...
dsonesuk Posted October 12, 2013 Share Posted October 12, 2013 (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 October 12, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now