0

これは 、次のコードの動作を確認できるjsfiddleです。

window resizeイベントがトリガーされたときに、jquery を使用して選択したボックスのサイズを変更しようとしました。

しかし、影響を受けるのは「選択された」クラスを持つ最初のボックスだけです。どうしてこれなの？

同じクラスの他のボックスを機能させるにはどうすればよいですか?

HTML

    <ul class="selection">
        <li class="selected">selected 1</li>
        <li>2</li>
        <li class="selected">selected 3</li>
        <li class="selected">selected 4</li>
        <li>5</li>
        <li class="selected">selected 6</li>
    </ul>​

JQuery

 $(window).resize(function(){


        $(".selected").each(function() {

            //Define ratio & minimum dimensions
            var minwidth = .5*(1024);
            var minheight = .5*(600);
            var ratio = 600/1024;

            //Gather browser and current size
            var imagewidth = $(this).width();
            var imageheight = $(this).height();
            var browserwidth = $(window).width();
            var browserheight = $(window).height();

            //Check for minimum dimensions
            if ((browserheight < minheight) && (browserwidth < minwidth)){
               $(this).height(minheight);
               $(this).width(minwidth);
            }
            else
            {    
             //When browser is taller    
             if (browserheight > browserwidth){
             imageheight = browserheight;
             $(this).height(browserheight);
             imagewidth = browserheight/ratio;
             $(this).width(imagewidth);

                 if (browserwidth > imagewidth){
                   imagewidth = browserwidth;
                   $(this).width(browserwidth);
                   imageheight = browserwidth * ratio;
                   $(this).height(imageheight);
                 }

               }

                    //When browser is wider
                    if (browserwidth >= browserheight){
                        imagewidth = browserwidth;
                        $(this).width(browserwidth);
                        imageheight = browserwidth * ratio;
                        $(this).height(imageheight);

                        if (browserheight > imageheight){
                            imageheight = browserheight;
                            $(this).height(browserheight);
                            imagewidth = browserheight/ratio;
                            $(this).width(imagewidth);
                        }
                    }
                }
                return false;
            });

            });


​
4

1 に答える 1

1

最後にを削除しreturn false; ます：このステートメントはeach、最初の実行後にループを中断しています

フィドルの例：http：//jsfiddle.net/YZKZL/1/

于 2012-09-21T12:36:10.547 に答える