Jquery 代码简化

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

    });

有没有办法简化这一点

在此方面的任何帮助都将不胜感激

---

谢谢。

添加一个共享类，如“mapItem”，并将内容附加到

此

对象

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

---

添加一个共享类，如“mapItem”，并将内容附加到

this

对象

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

---

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

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

---

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

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

---

如果你把一个类放在太小的州，你可以这样做：

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

---

其中.too#u small与$（'#ri link'）位于同一元素上，.abbr与$（'#ri link'）位于同一元素上。

如果将类放在太小的状态上，则可以执行以下操作：

$('.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'）位于同一元素上。

一般来说，更简单的方法是将

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

---

通常，更简单的方法是将

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

---

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

---

这只是一种方法，有很多。

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

---

这只是一种方法，有很多种。

不需要更改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(); });
    });
});

---

不需要更改您的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(); });
    });
});

---

---

你能在这后面也贴一些HTML吗？你能在这后面也贴一些HTML吗？在尝试了所有的解决方案后，你的解决方案效果最好。非常感谢您的帮助。我决定使用Raynos解决方案，因为它省去了添加状态列表的步骤。再次感谢tho。在尝试了所有解决方案后，您的解决方案效果最佳。非常感谢您的帮助。我决定使用Raynos解决方案，因为它省去了添加状态列表的步骤。再次感谢tho.Raynos，你的解决方案也很有效。实际上，我同意你的解决方案，因为它节省了我一步。我所需要做的就是将相应的id添加到应该触发的链接和元素中，您的脚本将负责该功能。非常感谢。雷诺斯，你的解决方案也很有效。实际上，我同意你的解决方案，因为它节省了我一步。我所需要做的就是将相应的id添加到应该触发的链接和元素中，您的脚本将负责该功能。非常感谢。你的意思是locrizak。像$（“#ri”）这样的元素的缩写？我试过了，但也没用。谢谢你，你是说，像$（'#ri'）这样的元素的.abbr？我试过了，但也没用。谢谢。Jakub，我的代码检查器说第2行有语法错误。谢谢。Jakub，我的代码检查器说第2行有语法错误。不过谢谢。这本应该是最好、最简单的解决方案，但不幸的是，它不起作用。谢谢Zirak，我想我应该将类“mapItem”添加到触发状态效果的侧链接中，比如“#ma link”。我那样做了，但没用。所以我从那些链接中删除了这个类，并将它添加到实际状态中，比如“ma”，但它也不起作用。你说得对，Zirak，它确实起作用。但是，我的HTML结构与您的不同，因此我必须更改它以使其正常工作。尽管如此，对于类似于您的示例的未来结构来说，这是一个非常好的解决方案。我会记住的。非常感谢您的帮助。这本应该是最好、最简单的解决方案，但不幸的是，它不起作用。谢谢Zirak，我想我应该将类“mapItem”添加到触发状态效果的侧链接中，比如“#ma link”。我那样做了，但没用。所以我从那些链接中删除了这个类，并将它添加到实际状态中，比如“ma”，但它也不起作用。你说得对，Zirak，它确实起作用。但是，我的HTML结构与您的不同，因此我必须更改它以使其正常工作。尽管如此，对于类似于您的示例的未来结构来说，这是一个非常好的解决方案。我会记住的。非常感谢你的帮助。我没有真正理解这一点。谢谢你，我没看懂这个。谢谢你。