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

再为所有foo元素提供一个课程etalage

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

您可以使用$ .extend函数简化如下..

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

通过上述方法，只需更改扩展函数的第三个参数即可覆盖任何属性。

如何简化此JavaScript？

3 个答案: