-3

这是相同的效果，但有 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>
4

3 回答 3

2

简单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
        });
     }
});
于 2012-07-21T11:02:21.413 回答
0

再给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
});
});
于 2012-07-21T11:09:41.877 回答
0

您可以使用 $.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"}));
});

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

于 2012-07-21T11:12:46.070 回答