js loop问题

Question

js loop问题, 下面的代码，无论 $('#c'+ )设置i或count,都等于$('#c99')。如何设置点击a1,隐藏c1,点击a6，隐藏c6，前后数字相对应？jQuery(document).ready(function() {
counter = 0;
for(i=1;i<100;i++){
counter = counter +1;
$('.a'+counter).toggle(function(){
$('#c'+counter).css('display','none');
},
function() {
$('#c'+counter).css('display','block');
});
}
});<a class="a1">click</a>
<p id="c1">text</p>
<a class="a6">click</a>
<p id="c6">text</p>
<a class="a87">click</a>
<p id="c87">text</p>

Answer 1

 for(i=1;i<100;i++){     
          (function(n) {
                  return function() {
                     $('.a'+n).toggle(function(){
                        $('#c'+n).css('display','none');
                       },
                   function() {
                       $('#c'+n).css('display','block');
                   });
                  }
            })(i)          
    }

Answer 2

jQuery(document).ready(function() {
    counter = 0;
    for(i=1;i<100;i++){
!function(i){
counter = counter +1;
$('.a'+counter).toggle(function(){
$('#c'+counter).css('display','none');
},
function() {
$('#c'+counter).css('display','block');
});
}(i)
    }
});