Desidero migliorare il mio codice jQuery, fa quello che voglio, semplicemente troppo brutto, IMO

Question

quindi ho qui sotto questo script jQuery che funziona. Ma poiché sto imparando jQuery, mi piacerebbe approfittare di questo codice funzionante e renderlo più conciso.

Fondamentalmente rimuove una classe che contiene un'immagine di sfondo, quindi rende visibile un div che è un collegamento a un'area del sito. Sembra eccessivamente ripetitivo per me. Grazie per l'helppp.

IL CODICE:

$(document).ready(function(){ 
    $('#res').live('mouseover',function(){ 
     $(this).removeClass('resume'); 
     $('#reslin').css('visibility','visible'); 
    }); 

    $('#res').live('mouseout',function(){ 
     $(this).addClass('resume'); 
     $('#reslin').css('visibility','hidden');; 
    }); 

    $('#pro').live('mouseover',function(){ 
     $(this).removeClass('projects'); 
     $('#prolin').css('visibility','visible'); 
    }); 

    $('#pro').live('mouseout',function(){ 
     $(this).addClass('projects'); 
     $('#prolin').css('visibility','hidden'); 
    }); 

    $('#abo').live('mouseover',function(){ 
     $(this).removeClass('about'); 
     $('#abolin').css('visibility','visible'); 
    }); 

    $('#abo').live('mouseout',function(){ 
     $(this).addClass('about'); 
     $('#abolin').css('visibility','hidden'); 
    }); 

    $('#con').live('mouseover',function(){ 
     $(this).removeClass('contact'); 
     $('#conlin').css('visibility','visible'); 

    }); 

    $('#con').live('mouseout',function(){ 
     $(this).addClass('contact'); 
     $('#conlin').css('visibility','hidden'); 
    }); 
}); 

Answer 1

tshauck, ecco una soluzione efficiente per il tuo problema senza modificare il tuo codice HTML esistente.

jQuery(document).function($) { 

    var myClasses = { 
     pro: 'projects', 
     res: 'resume', 
     abo: 'about', 
     con: 'contact' 
    } 

    $('#res, #pro, #abo, #con').live('mouseenter', function() { 
     $('#' + $(this).attr('id') + 'lin') 
      .addClass(myClasses[$(this).attr('id')]) 
      .css('visibility', 'visible'); 

    }).live('mouseleave', function() { 
     $('#' + $(this).attr('id') + 'lin') 
      .addClass(myClasses[$(this).attr('id')]) 
      .css('visibility', 'hidden'); 
    }); 

}); 

Buona fortuna.

Answer 2

Dare ciascuno dei gruppi di elementi della stessa classe (cioè res, pro, abo, con ora hanno classe className, e reslin, prolina, Abolin, e Conlin hanno classe linClassName) , poi fare questo:

$(document).ready(function(){ 
    $('.className').live('mouseover',function(){ 
     $(this).removeClass('contact'); 
     $('.linClassName').css('visibility','visible'); 

    }); 

    $('.className').live('mouseout',function(){ 
     $(this).addClass('contact'); 
     $('.linClassName').css('visibility','hidden'); 
    }); 
}); 

È inoltre possibile concatenare l'evento as suggested by Omar.

Answer 3

Un altro suggerimento è concatenare la delegazione evento:

$('#res').live('mouseover',function(){ 
     //code here 
    }).live('mouseout',function(){ 
     //code here 
    }); 

Answer 4

Sei sicuro che si desidera utilizzare lo stile di visibilità? se non importa, è meglio usare i metodi .hide() e .show(). e anche come ha detto Matthew, puoi usare gli stessi nomi di classe per ogni gruppo di elementi. In questo modo:

    $(document).ready(function(){ 
     $('.group1').live('mouseover',function(){ 
      $(this).removeClass('resume'); 
      $('.group2').show(); 
     }).live('mouseout',function(){ 
      $(this).addClass('resume'); 
      $('.group2').hide(); 
     }); 
    } 

Answer 5

Utilizzare un className invece degli ID come è già stato suggerito, e vorrei anche raccomando non inline le funzioni come sei

$('.className').live('mouseover',function(){ 
    $(this).removeClass('contact'); 
    $('.linClassName').css('visibility','visible'); 

}); 

sarebbe più pulito come

$('.className').live('mouseover', className_mouseover); 
//Any other event subscriptions go here 

//Then later, write the functions 
function className_mouseover(){ 
    $(this).removeClass('contact'); 
    $('.linClassName').css('visibility','visible'); 

} 

rende solo per più facile da pulire codice per seguire quando non è tutto purè insieme