Question

This code lets me display/hide a custom message msg_one msg_two msg_three when the appropriate div is hovered/unhovered over. The appropriate message is injected into the #screen div and show/hide is then applied. The code is almost identical except for the first 2 lines #one vs #two vs #three and the message being displayed msg_one msg_two msg_three.

How can I simplify this into fewer lines of code to get rid of the repetitiveness?

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

thanks.

Answer 1

You can extend jQuery, like this:

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

And use the function, like this:

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