Question

我无法弄清楚如何转换它：

$(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);
    });
});

进入这个：

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);
        });
    }
});

成功......任何人都可以发现我做错了吗？

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);
    });
  });
});

注意：您应该检查是否可以使用delegate而不是live来减少事件处理的范围。 live方法检查文档中发生的每个事件，而delegate方法可以应用于元素，并且只检查发生在其子元素上的事件。

jquery代码重复应该非常简单

1 个答案: