-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要素にもう 1 つのクラス発言権を与える

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

上記のアプローチでは、extend 関数の 3 番目のパラメーターを変更するだけで、任意のプロパティをオーバーライドできます。

于 2012-07-21T11:12:46.070 に答える