자바 스크립트 코드의 단순화

Question

아래 코드를 몇 줄로 압축 할 수 있습니까? 8 가지 이벤트에 대해 _jq_overlay_x 및 _jq_overlay_y 문이 비슷합니다. 나는 그것이 최적화를 위해 더 좋을 것 같은 줄을 압축하는 것이 더 좋을 것이라고 생각한다. 사전에

감사

$(document).ready(function(){ 
     $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay1').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay1').fadeIn(500); 
     }); 
     $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay2').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay2').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay3').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay3').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay4').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay4').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay5').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay5').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay6').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay6').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay7').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay7').fadeIn(500); 
     }); 
      $('#_jq_overlay_x').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay8').fadeOut(500); 
     }); 

     $('#_jq_overlay_y').click(function(event) { 
      event.preventDefault(); 
      $('#_jq_overlay8').fadeIn(500); 
     }); 
}); 

Answer 1

$(document).ready(function(){ 
    var elms=[]; 
    for (var i=1; i<=8;i++) { 
     elms.push($('#_jq_overlay'+i)[0]); 
    } 
    $('#_jq_overlay_x').click(function(event) { 
     event.preventDefault(); 
     $(elms).fadeOut(500); 
    }); 

    $('#_jq_overlay_y').click(function(event) { 
     event.preventDefault(); 
     $(elms).fadeIn(500); 
    }); 
});​ 

여기에 작동하는 것으로 표시되는 FIDDLE입니다.

Answer 2

어느 대신 ID의 나처럼 뭔가에 비슷한 사람을 모두 결합하여 사용 클래스 : 한 번의 클릭을 사용하고 개체 .is(':visible') 있는지 확인, 그리고

$("#object1, #object2, #object3, ...").click(function() { ... }); 

그것을 숨기거나 보여주기.

Answer 3

나는이 단축 될 수 있다고 생각 :

$('#_jq_overlay_x,#_jq_overlay_y').click(function(event) { 
    event.preventDefault(); 
    for (var i=1;i<9;(i=i+1)){ 
    $('#_jq_overlay'+i)[(/_y/i.test(this.id) ? 'fadeIn' : 'fadeOut')](500); 
    } 
}); 

이 this jsfiddle 모형