7
votes

Voulez-vous améliorer mon code jQuery, ce que je veux, trop moche, imo

Donc, j'ai ce script jQuery ci-dessous qui fonctionne. Mais comme je suis tout simplement apprenant JQuery, j'aimerais profiter de ce code de travail et la rendre plus terres.

Il supprime fondamentalement une classe qui contient une image d'arrière-plan, puis rend une div visible qui est un lien vers une zone du site. Cela me semble trop répétitif. Merci pour l'AidePPP.

Le code: xxx

jquery css

1 commentaires

Pouvez-vous également nous donner un exemple de votre HTML, qui aidera les choses à la ligne

5 Réponses :

3
votes

Donnez à chacun des groupes d'éléments la même classe (c.-à-d. Res, Pro, Abo, contient maintenant Classe ClasseName Code> et Reslin, PROLIN, ABOLIN et CONLL ont une classe linglassname code>), alors faites ceci:

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

0 commentaires

0
votes

Une autre suggestion est de concaténer la délégation d'événement:

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

0 commentaires

0
votes

Êtes-vous sûr de vouloir utiliser un style de visibilité? Si peu importe, il est préférable d'utiliser .Hide () et .Show (). Et aussi, comme dit Matthew, vous pouvez utiliser les mêmes noms de classe pour chaque groupe d'éléments. comme ceci: xxx

0 commentaires

8
votes

Tshauck, voici une solution efficace pour votre problème sans changer de votre HTML existant.

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

});

0 commentaires

0
votes

Utilisez un nom de classe au lieu des identifiants, comme cela a déjà été suggéré, et je vous recommanderais également de ne pas inliquer vos fonctions comme vous êtes xxx pré>

serait plus propre comme p>

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

}

0 commentaires