javascript - 如何简化这个重复的jquery？

Question

此代码可让我显示/隐藏自定义消息 msg_one msg_two msg_three当适当的 div 悬停/取消悬停时。适当的消息被注入(inject)到 #screen div然后应用显示/隐藏。除了前两行 #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);