keiyag score 20
2015/05/13 00:31 投稿
| こんばんは、 |
| ちょっとhtml側がないのでどういう構造になっているか把握しかねるところですが、 |
| 想定して回答となりますので、ご留意ください。 |
| 繰り返し構文でonメソッドを実装されたようですが、 |
| こちらクリックを行った後にコールバック関数(以下太字部分)が実行されます。 |
| なので、繰り返しでonメソッドでクリックイベントを追加しても、 |
| コールバック関数内の変数(ここでいうところの変数n)は渡せないことになります。 |
| $("#"+n).on("click",**function(){...}**); |
| ただ、こうした書き方にすればできるのではと思います。 |
| [html] |
| <body> |
| <header> |
| <h1>jQuery</h1> |
| </header> |
| <main> |
| <ul> |
| <li id="btn1">クリック</li> |
| <li id="btn2">ダブルクリック</li> |
| <li id="btn3">マウスオーバー</li> |
| </ul> |
| <div id="img_view">ここにImageを表示</div> |
| <div id="tmp"></div> ←ここに |
| <div id="tmp"></div> ←ここに配列imgsに格納された画像を出力 |
| <div id="str_view"><p>テスト</p>ここに文字を表示</div> |
| </main> |
| <footer></footer> |
| [js] |
| var imgs = ["l1.png" , "l2.png" , "l3.png","l4.png" , "l5.png" , "l6.png","l7.png" , "l8.png" , "l9.png"]; |
| var n = 0; |
| while(n < 9){ |
| n++; |
| console.log(n); |
| **$("#tmp").append('<img id="img'+ (n-1) +'" src="img/'+imgs[n-1]+'" width=80%>');** |
| __↑ここでid="tmp"の要素に画像を出力、出力した画像のidには"img0","img1"...を指定__ |
| $("#img"+(n-1)).on("click",function(){ |
| __↑出力した画像をクリックした際のイベント__ |
| **var index = $("#tmp img").index(this);** |
| $("#img_view").html('<img src="img/'+imgs[**index**]+'">'); |
| }); |
| } |
| }); |
| ポイントとしては、 |
| jqueryのindexメソッドを使って何番目の要素をクリックしたか、 |
| 変数indexに格納しています。 |
| 以下参考URLになります。 |
| http://qiita.com/otoyo/items/04e12fe478b7f76ce545 |
| もう少し楽orスマートなやり方が色々あると思うので、 |
| 是非チャレンジしてみてください。 |
