凝縮同じ機能

Question

は私が

$('.project-1 img').hover(function() { 
     $('#id1').slideToggle(); 
    }); 
    $('.project-2 img').hover(function() { 
     $('#id2').slideToggle(); 
    }); 
    ... 
    $('.project-7 img').hover(function() { 
     $('#id7').slideToggle(); 
    }); 

が、私はこのコードの以下のビットを試してみました...（1〜7番）関数のこのjQueryのセットを凝縮支援するためのJavaScriptのビットを書き込もうとしますが、それだけしています私はクリーンなものにコードを凝縮するにはどうすればよいのターゲット slideToggleと #id7 ...

for (i = 1; i <= 7; i++) { 
     var projectNum = '.project-' + i + ' img'; 
     var idNum = '#id' + i; 
     $(projectNum).hover(function() { 
     $(idNum).slideToggle(); 
     }); 
    }; 

？ありがとう！

Answer 1

上記のコメントは正しく問題を診断しました。ループが働くだろうが

for (i = 1; i <= 7; i++) { 
    (function (i) { 
    $('.project-' + i + ' img').hover(function() { 
     $('#id' + i).slideToggle(); 
    }); 
    })(i); 
}; 

Answer 2

（あなたは閉鎖問題を修正する場合）より良い解決策ではなく、すべてのimg要素と回避のために働くだろう単一のイベントハンドラをアタッチするためにDRY原則を使用することです：ここで修正がありますすべてのループやクロージャの必要性これを試してみてください：

<div class="project"> 
    <img src="foo.jpg" data-target="#id1" /> 
</div> 
<div class="project"> 
    <img src="bar.jpg" data-target="#id2" /> 
</div> 
<!-- and so on... --> 

<div id="id1">Lorem</div> 
<div id="id2">Ipsum</div> 
<!-- and so on... --> 

$('.project img').hover(function() { 
    var target = $(this).data('target'); 
    $(target).slideToggle(); 
});