CODEWITHSUNDEEP
jqueryfunctionload
Jeff Voss
Jeff Voss

Reputation: 3695

jquery code repetition should be pretty simple

I cant quite figure out how to convert this:

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

into this:

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

Successfuly... can anyone spot what I'm doing wrong?

Upvotes: 0

Views: 340

Answers (1)

Guffa
Guffa

Reputation: 700542

You are using the variable i inside the event handlers, but at the time the event happens the variable has been used to loop the array and has a value beyond the last item in the array.

You need a closure where you can declare a variable for each iteration that can hold a copy of the index, so that it's not changed by the next iteration. You can use an anonumous function inside your loop to create the closure, or you can use the jQuery.each method to loop the array which uses a callback function so that you get the closure in the bargain:

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

Note: You should check if you can use delegate instead of live to reduce the scope of the event handling. The live method checks every event that happens in the document, while the delegate method can be appied to an element and would only check the events that happen to it's children.

Upvotes: 1

Related Questions