Хочу улучшить свой код JQuery, делает то, что я хочу, слишком уродливо, IMO

Question

поэтому у меня есть этот скрипт jQuery ниже, который работает. Но так как я только изучаю jQuery, я хотел бы воспользоваться этим рабочим кодом и сделать его более лаконичным.

В основном он удаляет класс, который содержит фоновое изображение, а затем делает div видимым, который является ссылкой на область сайта. Это кажется слишком повторным для меня. Спасибо за помощь.

КОД:

$(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, вот эффективное решение вашей проблемы без изменения любого существующего HTML.

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

});

Удачи.

Answer 2

Дайте каждой группе элементов один и тот же класс (т. Е. Res, pro, abo, con теперь имеют класс className, а reslin, пролин, аболин и conlin имеют класс linClassName), затем выполните следующее:

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

Вы также можете связать событие в соответствии с предложением Омара .

Answer 3

Используйте className вместо идентификаторов, как уже было предложено, и я бы также рекомендовал не включать ваши функции, поскольку вы

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

});

будут чище, так как

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

}

Это делает код более понятным, если не все смешано

Answer 4

Вы уверены, что хотите использовать стиль видимости?если это не имеет значения, лучше использовать методы .hide () и .show ().а также, как сказал Мэтью, вы можете использовать одинаковые имена классов для каждой группы элементов.как это:

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

Answer 5

Еще одно предложение - объединить делегирование события:

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