Лучший способ написать эту функцию jQuery?

Question

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

$('#l1').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l1c').fadeIn('300') 
}); 
$('#l2').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l2c').fadeIn('300') 
}); 
$('#l3').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l3c').fadeIn('300') 
}); 
$('#l4').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l4c').fadeIn('300') 
}); 
$('#l5').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l5c').fadeIn('300') 
}); 
$('#l6').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l6c').fadeIn('300') 
}); 
$('#l7').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l7c').fadeIn('300') 
}); 
$('#l7').hover(function() { 
    $(this).fadeOut('300'); 
    $('#l7c').fadeIn('300') 
}); 
$('#l1c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l1').fadeIn('300') 
}); 
$('#l2c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l2').fadeIn('300') 
}); 
$('#l3c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l3').fadeIn('300') 
}); 
$('#l4c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l4').fadeIn('300') 
}); 
$('#l5c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l5').fadeIn('300') 
}); 
$('#l6c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l6').fadeIn('300') 
}); 
$('#l7c').mouseout(function() { 
    $(this).fadeOut('300'); 
    $('#l7').fadeIn('300') 
}); 

Answer 1

$('#l1,#l2,#l3,#l4,#l5,#l6,#l7').hover(function() { 
    $(this).fadeOut(300); 
    $("#" + this.id + "c").fadeIn(300); 
}); 

$('#l1c,#l2c,#l3c,#l4c,#l5c,#l6c,#l7c').mouseout(function() { 
    $(this).fadeOut(300); 
    $("#" + this.id.substring(0, this.id.length - 1)).fadeIn(300); 
}); 

Answer 2

Вы можете добавить два класса для двух типов дел. например: от # l1 до # l7 добавить класс «.ln»; для # l1c до # l7c, добавьте класс «.lnc», затем используйте код ниже:

$(".ln").live("hover", function(){ 
    $(this).fadeOut('300'); 
    $("#" + $(this).attr("id") + "c").fadeIn(300); 
}; 

$(".lnc").live("mouseout", function(){ 
    var id = $(this).attr("id"); 
    $(this).fadeOut('300'); 
    $("#" + id.substring(0, id.length - 1)).fadeIn(300); 
};