Упрощение кода

Question

Я использую плагин jQuery maphighlight с картой США.

У меня есть несколько штатов, которые слишком малы, чтобы на них наносили свои аббревиатуры, поэтому я должен отложить их в сторону.

Что я уже сделал, так это то, что когда пользователь наводит курсор на аббревиатуру, соответствующее состояние подсвечивается.Это нормально работает.

Проблема, с которой я столкнулся, заключается в том, что, хотя код работает, он выглядит слишком повторяющимся для меня, я попытался упростить / оптимизировать его, но ошибка, которую я получаю, заключается в том, что все сокращениявыделите одно состояние, а не соответствующее.

Вот код, который у меня есть на данный момент:

$(function() {
    $('.map').maphilight();

    $('#ma-link').mouseover(function(e) {
        $('#ma').mouseover();       
        }).mouseout(function(e) {
            $('#ma').mouseout();
        }).click(function(e) { e.preventDefault(); });

    $('#ri-link').mouseover(function(e) {
        $('#ri').mouseover();       
        }).mouseout(function(e) {
            $('#ri').mouseout();
        }).click(function(e) { e.preventDefault(); });
    $('#ct-link').mouseover(function(e) {
        $('#ct').mouseover();       
        }).mouseout(function(e) {
            $('#ct').mouseout();
        }).click(function(e) { e.preventDefault(); });

    $('#nj-link').mouseover(function(e) {
        $('#nj').mouseover();       
        }).mouseout(function(e) {
            $('#nj').mouseout();
        }).click(function(e) { e.preventDefault(); });

    $('#de-link').mouseover(function(e) {
        $('#de').mouseover();       
        }).mouseout(function(e) {
            $('#de').mouseout();
        }).click(function(e) { e.preventDefault(); });

    $('#md-link').mouseover(function(e) {
        $('#md').mouseover();       
        }).mouseout(function(e) {
            $('#md').mouseout();
        }).click(function(e) { e.preventDefault(); });

    });

Есть ли способ упростить это?

Любая помощь сэто будет с благодарностью.

Спасибо.

Answer 1

Никаких изменений в вашем HTML не требуется.Просто замените свой блок этим.

$(function() {
    $('.map').maphilight();

    $('[id$="-link"]').each(function() {
        var child = $("#" + this.id.substr(0,2));
        $(this).mouseover(function() {
             child.mouseover();
        }).mouseout(function() {
             child.mouseout();
        }).click(function(e) { e.preventDefault(); });
    });
});

Answer 2

Вы можете извлечь в плагин jQuery:

(function($) {

    $.fn.bindMice = function(relevantSelector) {
        return this
            .mouseover(function(e) {
                $(relevantSelector).mouseover();       
            })
            .mouseout(function(e) {
                $(relevantSelector).mouseout();
            })
            .click(function(e) { e.preventDefault(); });
    });

})(jQuery);

Затем вы можете использовать так:

$('#ma-link').bindMice('#ma');
$('#ri-link').bindMice('#ri'); // and so on..

Это всего лишь один способ, их много.

Answer 3

Добавьте общий класс, такой как 'mapItem', и прикрепите материал к объекту this.

$('.mapItem').mouseover(function(e) {
        $(this).find(selector).mouseover();       
    }).mouseout(function(e) {
        $(this).find(selector).mouseout();
    }).click(function(e) { e.preventDefault(); });

Answer 4

Как правило, более простым способом было бы назначить атрибуты rel для соответствующих тегов, а затем просто использовать одно общее назначение:

$('.link').mouseover(function(e)
{
    id = $(this).attr('rel');

    $('#' + id).mouseover();
}).mouseout(function(e) 
{
    id = $(this).attr('rel');

    $('#' + id).mouseout();
}).click(function(e) 
{ 
    e.preventDefault(); 
});

Answer 5

Если вы поместите класс в слишком малые состояния, вы можете сделать это:

$('.too_small').mouseover(function(e) {
        $(this).find('.abbr').mouseover();       
        }).mouseout(function(e) {
           $(this).find('.abbr').mouseout();
        }).click(function(e) { e.preventDefault(); });

Где .too_small находится в том же элементе, что и $ ('# ri-link') и .abbrнаходится на таких элементах, как $ ('# ri-link')

Answer 6

Просто создайте функцию и передайте идентификатор состояния, просто:

function hoverState(state)
    $('#'+state+'-link').mouseover(function(e) {
        $('#'+state).mouseover();       
        }).mouseout(function(e) {
            $('#'+state).mouseout();
        }).click(function(e) { e.preventDefault(); });
}