Как я могу упростить этот повторяющийся jquery?

Question

Этот код позволяет мне отображать/скрывать настраиваемое сообщение msg_onemsg_twomsg_three, когда соответствующий div завис/невключен. Соответствующее сообщение вводится в #screen div, а затем применяется show/hide. Код почти идентичен, за исключением первых 2 строк #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); 

Answer 2

var msgs = { 
    'one': 'message 1', 
    'two': 'message 2', 
    'three': 'message 3' 
} 
$('#one, #two, #three').hover(function(){ 
    $("#screen").html(msgs[this.id]).show(); 
}, function() { 
    $("#screen").html("").hide(); 
}); 

Answer 3

Вы можете поместить каждый из трех сообщений в title атрибут соответствующий <div>. Затем вы можете добавить класс к дивам и:

$('.hover-div').hover(function() { 
    var msg = $(this).attr('title'); 
    $("#screen").html(msg).show(); 
}, function(){ 
    $("#screen").html("").hide(); 
}); 

Я надеюсь, что код работает, я написал это из моей головы :). Во всяком случае, идея в порядке.

Answer 4

Если "#one", "#two", и "#three" все в одном контейнере, вы можете воспользоваться этим:

$("#container").hover(function(e) { 
    $("#screen").html($(e.target).attr("title")).show(); 
}, function(e) { 
    $("#screen").html("").hide(); 
}) 

Answer 5

[{elem: '#one', msg: msg_one }, 
{elem: '#two', msg: msg_two }, 
{elem: '#three', msg: msg_three } 
].each(function(item) { 
    $(item.elem).hover(function() { 
     $("#screen").html(item.msg).show(); 
    }, 
    function() { 
     $("#screen").html("").hide(); 
    }); 
}); 

Answer 6

Я хотел бы создать простой плагин которые вы можете использовать в долгосрочной перспективе:

<script type="text/javascript"> 
(function($){ 

    $.fn.hoverScreen = function(options){ 
     var config = $.extend({}, $.fn.hoverScreen.defaults, options); 
     return this.each(function(){ 
      var $this = $(this); 
      $this.hover(function(){ 
       config.screenElem.html(config.text).show();    
      }, function(){ 
       config.screenElem.html('').hide(); 
      }); 
     }); 
    } 

    $.fn.hoverScreen.defaults = { 
     screenElem: null, 
     text: '' 
    } 

})(jQuery); 
</script> 

Usage бы сейчас очень просто:

$(function(){ 
    $.fn.hoverScreen.defaults.screenElem = $("#screen"); 
    $("#one").hoverScreen({ text: 'message one' }); 
    $("#two").hoverScreen({ text: 'message two' }); 
});