.load() 多个链接地址到一个div

Question

下面有一段很长的代码，我正在将文本加载到一个 div 中，同时将鼠标悬停在另一个 div 上，我想将一堆不同的链接加载到同一个 div 中，我有两个问题

1) 我知道有更好的方法来编写此代码，使用数组 - 我需要学习如何编写数组。

2) 如果鼠标移动得很快，我需要动画停止，如果你在所有链接上乱涂乱画，我需要长时间不加载#id

这有意义吗？？

$(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

为了避免代码重复，我会这样做：

var urls = [
 'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cadherins_',
 'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ascent_',
 ...
];

$(document).ready(function() {    
    for(var i=0; i< urls.length; i++){
        $(".cell_"+(i+1)+" a").hover(function(){
            $('#gridInfo').fadeIn(100).load(urls[i]);
        }, function(){
            $('#gridInfo').fadeOut(100);
        });
    }
});

Answer 2

看。

$(function() {
    var urls = [
        'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cadherins_',
        'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ascent_',
        ..etc..
    ];
    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').fadeOut(100);
        });
    }
});

有关加载的内容，请参见此处How to cancel a jquery.load()?