JQuery와 코드의 반복은 매우 간단해야

Question

나는 캔트 확실히이 변환하는 방법을 알아낼 :

Successfuly

var urls = [ 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#stratos_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#riken_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#scitable_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ubc_asthma', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#xcelligence_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#lbsc_geneware', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nr_micro', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#genII_knee', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#exiqon_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#hpi_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#plexmark_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#siscapa_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#RNAi_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#k2_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nucleonics_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ca125_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cci_nursing', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_', 
'http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_', 
]; 
$(function() { 
    for(var i=0;i<urls.length;i++){ 
     var index = i+1; 
     $(".cell_"+index+" a").live('mouseover', function(){ 
      $('#gridInfo').fadeIn(100).load(urls[i]); 
     }); 
     $(".cell_"+index+" a").live('mouseout', function(){ 
      $('#gridInfo').stop(true,true).fadeOut(100); 
     }); 
    } 
}); 

... 누군가가 내가 잘못 무엇을 발견 할 수 있습니다이에

$(function() { 
$(".cell_1 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#arkitek_reel'); 
    }); 
$(".cell_1 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_2 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ab_sciex'); 
    }); 
$(".cell_2 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_3 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#stratos_'); 
    }); 
$(".cell_3 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_4 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#riken_'); 
    }); 
$(".cell_4 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_5 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#scitable_'); 
    }); 
$(".cell_5 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_6 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ubc_asthma'); 
    }); 
$(".cell_6 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_7 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#xcelligence_'); 
    }); 
$(".cell_7 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_8 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#lbsc_geneware'); 
    }); 
$(".cell_8 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_9 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nr_micro'); 
    }); 
$(".cell_9 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_10 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#genII_knee'); 
    }); 
$(".cell_10 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_11 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#exiqon_'); 
    }); 
$(".cell_11 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_12 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#hpi_'); 
    }); 
$(".cell_12 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_13 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#plexmark_'); 
    }); 
$(".cell_13 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_14 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#siscapa_'); 
    }); 
$(".cell_14 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_15 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#RNAi_'); 
    }); 
$(".cell_15 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_16 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#k2_'); 
    }); 
$(".cell_16 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_17 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#nucleonics_'); 
    }); 
$(".cell_17 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_18 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ca125_'); 
    }); 
$(".cell_18 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_19 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cci_nursing'); 
    }); 
$(".cell_19 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_20 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#cadherins_'); 
    }); 
$(".cell_20 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

$(function() { 
$(".cell_21 a").live('mouseover', function(){ 
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inC#ascent_'); 
    }); 
$(".cell_21 a").live('mouseout', function(){ 
    $('#gridInfo').fadeOut(100); 
    }); 
}); 

을 ?

Answer 1

이벤트 처리기 내에서 변수 i을 사용하고 있지만 이벤트가 발생하면 변수를 사용하여 배열을 반복하고 배열의 마지막 항목을 초과하는 값을 갖습니다.

인덱스의 사본을 보유 할 수있는 각 반복마다 변수를 선언 할 수있는 클로저가 필요하므로 다음 반복에서 변경되지 않습니다. 당신은 폐쇄를 만들려면 루프 내부에 anonumous 기능을 사용할 수 있습니다, 또는 당신이 거래에 폐쇄 얻을 수 있도록 루프에 콜백 함수를 사용하여 배열을 jQuery.each 방법을 사용할 수 있습니다 :

$(function() { 
    $.each(urls, function(i, url) { 
    var index = i+1; 
    $(".cell_"+index+" a").live('mouseover', function(){ 
     $('#gridInfo').fadeIn(100).load(url); 
    }).live('mouseout', function(){ 
     $('#gridInfo').stop(true,true).fadeOut(100); 
    }); 
    }); 
}); 

참고 : 당신을 live 대신 delegate을 사용하여 이벤트 처리 범위를 줄일 수 있는지 확인해야합니다. live 메서드는 문서에서 발생하는 모든 이벤트를 검사하는 반면 delegate 메서드는 요소에 적용 할 수 있으며 자식에게 발생하는 이벤트 만 검사합니다.