반복적 인 jquery는 어떻게 단순화 할 수 있습니까?

Question

이 코드는 해당 div가 덮혀 있거나 보이지 않는 경우 사용자 정의 메시지 msg_onemsg_twomsg_three을 표시하거나 숨길 수 있습니다. 해당 메시지가 #screen div에 삽입되고 표시/숨기기가 적용됩니다. 첫 번째 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>. 그런 다음 div에 클래스를 추가하여 다음을 수행 할 수 있습니다.

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

코드가 작동되기를 바랍니다. 나는 내 머리에서 썼습니다. :) 어쨌든, 그 생각은 괜찮습니다. "#one", "#two"및 "#three는"같은 컨테이너에있는 모든 경우

Answer 4

, 당신은 활용할 수 :

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

사용 지금은 정말 간단 할 것이다 :

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