Q&A
htmlもあわせて追記してください。
###困っていること
.btn_sec2_19にmouseover,mouseout した際に9の画像を表示 非表示するコードをjQueryで書きました。
対応する.hover1
個別のコードでは問題なく表示できていたのですが、
下記for文にまとめたところ、なぜかすべて.btn_sec2_5の.hover5が表示 非表示されます。
for文に間違いがあれば指摘お願いします。
なければ他の要素をあたってみます。
どうぞよろしくお願いいたします。
###該当のソースコード
javascript
1 for(var i = 1; i <= 9; i++){ 2 $('.btn_sec2_'+i) 3 .on('mouseover',function(){ 4 $(".hover"+i).css({display:"block", opacity:0}) 5 .stop(true).animate({opacity:1}, 300, "easeOutQuart"); 6 }) 7 .on('mouseout',function(){ 8 $(".hover"+i).stop(true).fadeOut(); 9 }); 10 };
html
1<div class="group"> 2 <div class="btn_sec2_1"><img src="../common/img/product1.png" alt="" width="50px"><div class="hover1"><img src="../common/img/hover01.png" alt=""></div></div> 3 4 <div class="btn_sec2_2"><div class="hover2"><img src="../common/img/hover02.png" alt=""></div><img src="../common/img/product2.png" alt=""></div> 5 6 <div class="btn_sec2_3"><div class="hover3"><img src="../common/img/hover03.png" alt=""></div><img src="../common/img/product3.png" alt="" class="product3"></div> 7 8 <div class="btn_sec2_4"><div class="hover4"><img src="../common/img/hover04.png" alt=""></div><img src="../common/img/product4.png" alt=""></div> 9 10 <div class="btn_sec2_5"><div class="hover5"><img src="../common/img/hover05.png" alt=""></div><img src="../common/img/product5.png" alt=""></div> 11 12 <div class="btn_sec2_6"><div class="hover6"><img src="../common/img/hover06.png" alt=""></div><img src="../common/img/product6.png" alt=""></div> 13 14 <div class="btn_sec2_7"><div class="hover7"><img src="../common/img/hover07.png" alt=""></div><img src="../common/img/product7.png" alt=""></div> 15 16 <div class="btn_sec2_8"><div class="hover8"><img src="../common/img/hover08.png" alt=""></div><img src="../common/img/product8.png" alt=""></div> 17 18 <div class="btn_sec2_9"><div class="hover9"><img src="../common/img/hover09.png" alt=""></div><img src="../common/img/product9.png" alt=""></div></div>
回答4件
0
ベストアンサー
イベント内の$(".hover"+i)はその時点でのiの値が使われます。.on()実行時のiの値ではありません。
ですので、ループが終わった時点の9が使われ.hover9が表示されるはずですが、.hover5になっているということは、変数iを別のループで使いまわしているんじゃないかな、と思います。
解決にはletを使うか、即時関数でクロージャを使うのがいいと思います。
参考：
let - JavaScript | MDN
よくある間違い: ループ内でクロージャを作成する - JavaScript | MDN
投稿2016/07/13 10:58
総合スコア36074
0
そもそもなのですが、for でループを書く必要がありません。
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="group"> 9 <div class="btn_sec"> 10 <img src="../common/img/product1.png" alt="" width="50px"> 11 <div class="hover"> 12 <img src="../common/img/hover01.png" alt=""> 13 </div> 14 </div> 15 <div class="btn_sec"> 16 <img src="../common/img/product2.png" alt="" width="50px"> 17 <div class="hover"> 18 <img src="../common/img/hover02.png" alt=""> 19 </div> 20 </div> 21 <div class="btn_sec"> 22 <img src="../common/img/product3.png" alt="" width="50px"> 23 <div class="hover"> 24 <img src="../common/img/hover03.png" alt=""> 25 </div> 26 </div> 27 </div> 28 <script src="jQuery-2.1.4.min.js"></script> 29 <script type="text/javascript"> 30 $(function () { 31 $('.btn_sec').on('mouseover', function () { 32 $(this).find(".hover").css({display: "block", opacity: 0}) 33 .stop(true) 34 .animate({opacity: 1}, 300, "easeOutQuart"); 35 }).on('mouseout', function () { 36 $(this).find(".hover").stop(true).fadeOut(); 37 }); 38 }); 39 </script> 40 </body> 41</html>
投稿2016/07/13 10:50
編集2016/07/13 10:53退会済みユーザー
総合スコア0
0
javascript
1for(let i = 1; i <= 9; i++){
具体的な対応としてはこれに書き換えてブロックスコープを利用するべし
理屈はLhankor_Mhyさんがすでに書いているので省略します
投稿2016/07/13 11:46
総合スコア1895
0
Kosuke_Shibuyaさんの書いているようにforは不要ですが、i が無性に使いたいならこういうふうにも書けると思います。
JavaScript
1$.each( ( new Array( 9 ) ), function( i ) { 2 i += 1; 3 $( '.btn_sec2_' + i ).on( 'mouseover', function() { 4 $( '.hover' + i ).css( { display: 'block', opacity: 0 } ).stop( true ).animate( { opacity: 1 }, 300, 'easeOutQuart' ); 5 } ).on( 'mouseout', function() { 6 $( '.hover' + i ).stop( true ).fadeOut(); 7 }); 8} );
投稿2016/07/13 11:16
総合スコア69398
あなたの回答
tips
プレビュー
