代码简化

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

添加一个共享类，例如“mapItem”，并将内容附加到 this 对象。

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

Answer 3

您可以提取到 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 4

只需创建一个函数并传递状态 ID，很简单：

function hoverState(state)
    $('#'+state+'-link').mouseover(function(e) {
        $('#'+state).mouseover();       
        }).mouseout(function(e) {
            $('#'+state).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

一般来说，更简单的方法是将 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(); 
});