어떻게이 자바 스크립트를 단순화합니까?

Question

동일한 효과이지만 4 가지 다른 줌 요소입니다. 이 코드를 어떻게 단순화합니까?

<script> 
     $(document).ready(function(){ 
      $('.etalage').etalage({ 
       show_hint: false, 
       thumb_image_width: 470, 
       thumb_image_height: 470, 
       source_image_width: 1000, 
       source_image_height: 1000, 
       zoom_element: '#custom_zoom_element', 
       //source_image_height: 480, 
       //source_image_width: 480, 
       zoom_area_width: 470, 
       zoom_area_height: 470 
      }); 
     }); 

이 같은 효과가 있지만, 4 개 개의 다른 줌 요소입니다. 이 코드를 어떻게 단순화합니까?

 $(document).ready(function(){ 
      $('.etalage2').etalage({ 
       show_hint: false, 
        thumb_image_width: 470, 
       thumb_image_height: 470, 
       source_image_width: 1000, 
       source_image_height: 1000, 
       zoom_element: '#custom_zoom_element2', 
       //source_image_height: 480, 
       //source_image_width: 480, 
       zoom_area_width: 470, 
       zoom_area_height: 470 
      }); 
     }); 

동일한 효과가 있지만 4 가지 다른 줌 요소입니다. 이 코드를 어떻게 단순화합니까?

$(document).ready(function(){ 
      $('.etalage3').etalage({ 
       show_hint: false, 
        thumb_image_width: 470, 
       thumb_image_height: 470, 
       source_image_width: 1000, 
       source_image_height: 1000, 
       zoom_element: '#custom_zoom_element3', 
       //source_image_height: 480, 
       //source_image_width: 480, 
       zoom_area_width: 470, 
       zoom_area_height: 470 
      }); 
     });  

    $(document).ready(function(){ 
      $('.etalage4').etalage({ 
       show_hint: false, 
        thumb_image_width: 470, 
       thumb_image_height: 470, 
       source_image_width: 1000, 
       source_image_height: 1000, 
       zoom_element: '#custom_zoom_element4', 
       //source_image_height: 480, 
       //source_image_width: 480, 
       zoom_area_width: 470, 
       zoom_area_height: 470 
      }); 
     }); 


    </script> 

Answer 1

간단한 for는 그것을 할 것입니다 :

$(document).ready(function(){ 
    for(var i=1; i <= 4; ++i){ 
     $('.etalage'+(i===1 ? '':i)).etalage({ 
      show_hint: false, 
      thumb_image_width: 470, 
      thumb_image_height: 470, 
      source_image_width: 1000, 
      source_image_height: 1000, 
      zoom_element: '#custom_zoom_element'+(i===1 ? '':i), 
      //source_image_height: 480, 
      //source_image_width: 480, 
      zoom_area_width: 470, 
      zoom_area_height: 470 
     }); 
    } 
}); 

Answer 2

은 부여 하나 더 클래스 당신은 다음과 같이 단순화 $ .extend 기능을 사용할 수 있습니다 foo 요소

$(document).ready(function(){ 

     $('.foo').etalage({ 
       thumb_image_width: 470, 
       thumb_image_height: 470, 
       source_image_width: 1000, 
       source_image_height: 1000, 

    if($(this).hasClass('.etalage')){ 
       zoom_element: '#custom_zoom_element', 
    }else if($(this).hasClass('.etalage2')){ 
       zoom_element: '#custom_zoom_element2', 

    } 
    }else if($(this).hasClass('.etalage3')){ 
       zoom_element: '#custom_zoom_element3', 

    } 
    }else if($(this).hasClass('.etalage4')){ 
      zoom_element: '#custom_zoom_element4', 

    } 
     zoom_area_width: 470, 
     zoom_area_height: 470 
}); 
}); 

Answer 3

etalage 모두에 말한다. .

$(document).ready(function(){ 
    var defaultOpts = { 
     show_hint: false, 
     thumb_image_width: 470, 
     thumb_image_height: 470, 
     source_image_width: 1000, 
     source_image_height: 1000, 
     zoom_element: '#xyz', 
     zoom_area_width: 470, 
     zoom_area_height: 470 
    }; 
    $(".id1").etalage(defaultOpts); 
    $(".id2").etalage($.extend({},defaultOpts,{zoom_element:"#abc"})); 
    $(".id3").etalage($.extend({},defaultOpts,{zoom_element:"#def"})); 
}); 

위의 방법을 사용하면 확장 기능의 세 번째 매개 변수를 변경하여 모든 속성을 무시할 수 있습니다 ..