如何简化这种重复的jquery？

Question

此代码允许我msg_one msg_two msg_three在悬停/未覆盖相应的div时显示/隐藏自定义消息.然后将适当的消息注入到#screen divshow和hide中.除前两行#one vs #two vs #three和显示的消息外,代码几乎相同msg_one msg_two msg_three.

如何将其简化为更少的代码行以消除重复性？

var msg_one = "message 1";
var msg_two = "message 2";
var msg_three = "message 3";

$("#one").hover(function()  { 
    $("#screen").html(msg_one).show(); 
}, function(){ 
    $("#screen").html("").hide(); 
});

$("#two").hover(function()  { 
    $("#screen").html(msg_two).show(); 
}, function(){ 
    $("#screen").html("").hide(); 
});

$("#three").hover(function() { 
    $("#screen").html(msg_three).show(); 
}, function(){ 
    $("#screen").html("").hide(); 
});

谢谢.

Answer 1

您可以扩展jQuery,如下所示:

$.fn.hover_message = function (message) {
    $(this).bind("hover", function()    { 
        $("#screen").html(message).show(); 
    }, function(){ 
        $("#screen").html("").hide(); 
    });
}

并使用该功能,如下所示:

$("#one").hover_message(msg_one);
$("#two").hover_message(msg_two);
$("#three").hover_message(msg_three);