2012-09-21 162 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; 
      }); 

      }); 


​ 

回答