Code simplification

I'm using the jQuery maphighlight plugin with a map of the U.S.

I have several states that are too small to put their abbreviations on them, so I have to put them to the side.

What I have done already is that when the user hovers on an abbreviation, the corresponding state is highlighted. That's working fine.

The "problem" I have is that, although the code works, it looks too repetitive to me, I've tried to simplify/optimize it, but the error I get is that all abbreviations highlight one single state and not the corresponding one.

Here's the code I have so far:

$(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();
      开发者_如何学C  }).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(); });

    });

Is there a way to simplify this?

Any help with this will be greatly appreciated.

Thanks.

No change to your HTML required. Just replace your block with this.

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

Add a shared class, like 'mapItem', and attach stuff to the this object.

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

You could extract to a jQuery plugin:

(function($) {

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

})(jQuery);

You could then use like so:

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

This is just one way, there are many.

Just make a function and pass the state id, simple:

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

If you put a class on the states that are too small you could do this:

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

Where .too_small is on the same element as $('#ri-link') and .abbr is on elements like $('#ri-link')

In general, the easier way would be to assign rel attributes to the relevant tags, and then just use one blanket assignment:

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

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

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