어떻게 단축 할 수 있습니까?

Question

ID로 여러 개의 핫스팟이 있습니다. ID 특정 핫스팟은 마우스 오버시 영역 (ID-ed textarea)을 표시 한 다음 mouseout에서 텍스트 영역을 숨 깁니다 (CSS 디스플레이 : 숨김이 숨기기보다 훨씬 빠름). 약 50 개를 가지고 있습니다. 나는이 모든 것을 장황하게 묘사했습니다.

이렇게하는 것이 더 현명하고 효율적이며 더 짧은 방법을 배우고 싶습니다. 다음

function makehover(myid) 
{ 
    $('#pop'+myid).hover(
     function() { 
     $('#text'+myid+'.textarea').fadeIn('fast');   
     }, 
     function() { 
     $('#text'+myid+'.textarea').css({'display':'none'}); 
     } 
); 

:

//// POP 1_1 
$('#pop_01_01').hover(
    function() { 
    $('#text_01_01.textarea').fadeIn('fast');   
    }, 
    function() { 
    $('#text_01_01.textarea').css({'display':'none'}); 
    } 
); 
//// POP 02_01 
$('#pop_02_01').hover(
    function() { 
    $('#text_02_01.textarea').fadeIn('fast');   
    }, 
    function() { 
    $('#text_02_01.textarea').css({'display':'none'}); 
    } 
); 
//// POP 02_01 
$('#pop_02_02').hover(
    function() { 
    $('#text_02_02.textarea').fadeIn('fast');   
    }, 
    function() { 
    $('#text_02_02.textarea').css({'display':'none'}); 
    } 
); 
//// POP 02_03 
$('#pop_02_03').hover(
    function() { 
    $('#text_02_03.textarea').fadeIn('fast');   
    }, 
    function() { 
    $('#text_02_03.textarea').css({'display':'none'}); 
    } 
); 

Answer 1

당신은 할 수 있습니다 다음 :

1. 이 동작을하는 모든 개체를 하나의 jQuery 선택기에 결합하면 모두 동일한 코드를 실행할 수 있습니다.
2. 어쨌든 ID가 동일하지 않으므로 선택자에서 textarea을 제거하면 필요 없으므로 ID없이 빠르게 수행해야합니다.
3. 개체 ID에서 원하는 ID를 추출하고 끝 문자를 가져 와서 원하는 다른 ID를 만들 수 있습니다.
4. .css({'display':'none'}); 대신 .hide()을 기본 제공 바로 가기로 사용하십시오.

결과 코드 :

$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function() {$('#text_' + this.id.substr(-5)).fadeIn('fast');}, 
    function() {$('#text_' + this.id.substr(-5)).hide();} 
); 

Answer 2

$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function(){ 
     id = $(this).attr('id'); 
     $('#text'+id.substring(3,id.length)).fadeIn('fast');   
    }, 
    function(){ 
     id = $(this).attr('id'); 
     $('#text'+id.substring(3,id.length)).css({'display':'none'}); 
    } 
); 

나는 ID가 고유해야하기 때문에 이렇게 추가로

Answer 3

이 같은 함수를 사용하는 클래스를 사용할 이유가 없다 ".textarea"클래스를 ommited 한 전화

makehover('_01_01'); 
makehover('_02_01'); 
makehover('_02_02'); 

또는 jQuery를

를 통해

$.each(['_01_01','_02_01','_02_02'],function (a,b) { makehover(b); }); 

전화를 걸거나 (1.6 + 자바 스크립트)

['_01_01','_02_01','_02_02'].map(function (a) { makehover(a); return a; }); 

등을 통해 전화

당신은 같은 것을 할 수

Answer 4

:

이

var hotspots = ['01_01','02_01','02_02']; 
hotspots.forEach(function(i) { 
    $('#pop_' + i).hover(
     function() { 
     $('#text_' + i + '.textarea').fadeIn('fast');   
     }, 
     function() { 
     $('#text_' + i + '.textarea').css({'display':'none'}); 
     } 
    ); 
}); 

Answer 5

당신이 그것을 JQuery와 방법을 수행 할 경우, 해당 사항을 고려하십시오 그런데

$.fn.makeHover = function() { 
    this.each(function() { 
     var $el = $(this), 
      $textarea = $el.find('textarea'); 

     $el.hover(
      function() { 
       $textarea.fadeIn('fast'); 
      }, 
      function() { 
       $textarea.hide(); 
      } 
     ); 
    }); 
}; 

$('#pop_01_01, #pop_02_01, #pop_02_02, #pop_02_03').makeHover(); 

을, 나 또한 피할 수 $el 및 $textarea 캐싱 해요 항상 성능 향상을 위해 DOM을 통과합니다.

Answer 6

가장 좋은 방법은 id 대신 클래스별로 항목을 참조하고 id 대신 data-id 특성에 관련 부분 (01_01, 01_02 등)을 저장하는 것입니다. 그런

HTML - 
<div class="pop" data-id="_01_01"></div> 
<div class="pop" data-id="_02_01"></div> 
<div class="pop" data-id="_02_02"></div> 

<textarea data-id="_01_01"></textarea> 
<textarea data-id="_02_01"></textarea> 
<textarea data-id="_02_02"></textarea> 

//// All pops 
$('.pop').hover(
    function(e) { 
     var dataid = $(e.target).attr("data-id"); 
     $('textarea[data-id="'+dataid+'"]').fadeIn('fast'); 
    }, 
    function(e) { 
     var dataid = $(e.target).attr("data-id"); 
     $('textarea[data-id="'+dataid+'"]').hide(); 
    } 
); 

뭔가 추한 불필요한 ID의 무리를 사용하지 않는, 잘 모든 요소에 적용 할 수 있어야하고, 깨끗하고 당신의 이름에서 별도의 데이터를 유지해야한다.

피들 여기에 - http://jsfiddle.net/fGLnB/