2015-09-26 124 views
3

我有jQuery的一個問題。無法弄清楚如何做到這一點。 我有多個部分的寬度不同的高度:調整大小高度時,窗口大小

<section id="1" class="something" style="height:111px; background:red;">1</section> 
<section id="2" class="something" style="height:222px; background:blue;">2</section> 
<section id="3" class="something" style="height:333px; background:green;">3</section> 

我的jQuery級的各部分的高度,當窗口小於500像素:

var org_height = $('.something').height(); 

$(window).resize(function() { 

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

     var win = $(window).width(); 
     var height = $('.something').height(); 

     if(win < 500) { 
      y = 500 - win; 
      $('.something').css("height",org_height-y/3+"px"); 
     } 
     else { 
      $('.something').css("height",org_height+"px"); 
     } 
    }); 

}); 

的jsfiddle:https://jsfiddle.net/owtz31jj/

我怎麼可以存儲每個部分的原始高度並根據每個高度縮放它們並再次回到原始高度。我非常感謝任何幫助。

回答

2

您可以使用jQuey.fn.data

// Store original height for each .something 
$(".something").each(function() { 
    $(this).data('org_height', $(this).height()); 
}); 
$(window).on('resize', function() { 
    var win = $(window).width(); 
    $(".something").each(function() { 
     // Get the value storred in org_height using jQuery.fn.data 
     var org_height = $(this).data('org_height'); 
     if(win < 500) { 
      var y = 500 - win; 
      $(this).css("height", org_height - y/3); 
     } 
     else { 
      $(this).css("height", org_height); 
     } 
    }); 
}); 
+0

那是快。非常感謝你,它完美的作品。 – user5379464

+0

沒問題。你會看到如何在每個函數中使用'$(this)'?這將確保你從相應的元素獲得org_height。 – andlrc

+0

是的,我喜歡jQuery的越來越多;) – user5379464

相關問題