Повторение кода JQuery должно быть довольно простым - PullRequest
Новая
       4

Повторение кода JQuery должно быть довольно простым

0 голосов
/ 05 мая 2011

Я не могу понять, как конвертировать это: 

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

Успешно ... кто-нибудь может заметить, что я делаю неправильно?

1 Ответ

1 голос
/ 05 мая 2011

Вы используете переменную i внутри обработчиков событий, но в то время, когда событие происходит, переменная использовалась для зацикливания массива и имеет значение, превышающее последний элемент в массиве.

Вам нужно замыкание, где вы можете объявить переменную для каждой итерации, которая может содержать копию индекса, чтобы она не изменялась при следующей итерации.Вы можете использовать анонимную функцию внутри цикла для создания замыкания или метод 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 может быть применен к элементу и будет проверять только события, которые происходят с его дочерними элементами.

...