Comment est-ce que je peux simplifier ce jquery répétitif?

Question

Ce code me permet d'afficher/masquer un message personnalisé msg_onemsg_twomsg_three lorsque le div approprié est survolé ou déplacé. Le message approprié est injecté dans #screen div et show/hide est ensuite appliqué. Le code est presque identique à l'exception des 2 premières lignes #one vs #two vs #three et le message est affiché msg_one msg_two msg_three.

Comment puis-je simplifier cela en moins de lignes de code pour se débarrasser de la répétitivité?

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

merci.

Answer 1

Vous pouvez étendre jQuery, comme ceci:

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

Et utiliser la fonction, comme ceci:

$("#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

Vous pouvez mettre chacun des trois messages dans un attribut title de le <div> correspondant. Ensuite, vous pouvez ajouter une classe aux divs et:

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

J'espère que le code fonctionne, je l'ai écrit de ma tête :). Quoi qu'il en soit, l'idée est ok.

Answer 4

Si "#one", "#two" et "#three" sont tous dans le même conteneur, vous pouvez profiter de cette:

$("#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

Je voudrais créer un simple plugin que vous pouvez réutiliser à long terme:

<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> 

utilisation serait vraiment simple:

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