2012-09-21 158 views
0

調整大小這裏是一個jsfiddle你可以看到下面的代碼在行動。調整窗口大小的框與jquery

當觸發window resize事件時,我嘗試使用jquery調整選定框的大小。

但它只是第一個框與受影響的'selected'類。爲什麼是這樣?

我該如何讓其他箱子做同樣的班級工作?

的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; 
      }); 

      }); 


​ 

回答