jQuery динамически меняет высоту элемента

Я работаю над проектом гибкого макета. В моем документе есть несколько DIV с фиксированной высотой, и высота у них у всех разная. Мне нужно пропорционально изменить высоту этих DIV при изменении размера браузера. Вот разметка.

<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>

И CSS:

<style>
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; }
    #a { height: 200px; background-color: yellow;}
    #b { height: 400px; background-color: green;}
    #c { height: 600px; background-color: grey;}
</style>

Звучит легко! Главное условие заключается в том, что я не знаю точного количества целевых DIV и их идентификаторов, поэтому я использую .each(function()). Вот сценарий, который я написал:

$(document).ready(function(){
//set the initial body width
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/
$(".target").each(function() 
{
    //get the initial height of every div
    var originalHeight = $(this).height(); 
    //get the new body width
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height
    var newHeight = originalHeight + (widthDiff / 10); 
    //sets the different height for every needed div
    $(this).css("height", newHeight); 
});

});

Этот скрипт отлично работает, когда пользователь перезагружает страницу. Как я могу получить те же результаты динамически, когда пользователь изменяет размер браузера без перезагрузки? Я знаю, что должен применить прослушиватель событий $(window).resize. Но проблема в том, что начальная высота DIV будет вычисляться внутри события, и результат будет почти как бесконечный цикл, то есть конечная высота будет увеличиваться или уменьшаться в огромной прогрессии. Мне это не нужно! Как я могу вычислить начальную высоту каждого DIV вне функции события, а затем использовать эти высоты внутри функции события? Или может быть есть другой подход, чтобы получить тот же результат?


jquery window-resize height
person theCoder    schedule 16.06.2012    source источник

Ответы (4)


arrow_upward
14
arrow_downward

Вам нужно сохранить исходную высоту каждого div. Есть разные способы сделать это, вот один хак, сохранить его в самом узле DOM (есть лучшие способы, но это быстро и грязно).

$(document).ready(function(){
  //set the initial body width
  var originalWidth = 1000; 
  /*I need to go through all target divs because i don't know
  how many divs are here and what are their initial height*/


  function resize() {
    //This will only set this._originalHeight once
    this._originalHeight = this._originalHeight || $(this).height();
    //get the new body width
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height
    var newHeight = this._originalHeight + (widthDiff / 10); 
    //sets the different height for every needed div
    $(this).css("height", newHeight); 

  }

  $(".target").each(resize);
  $(document).resize(function(){
      $(".target").each(resize);
  });
});
person Juan Mendes    schedule 16.06.2012
comment
Действительно быстрое и простое решение. Работает отлично. Спасибо! - person theCoder; 17.06.2012

arrow_upward
2
arrow_downward

Завершите свою функциональность изменения размера и подпишитесь на событие изменения размера окна.

$(document).ready(function(){
   //set the initial body width
   var originalWidth = 1000; 
   resizeTargets();
   $(window).resize(resizeTargets);

});

function resizeTargets()
{
   $(".target").each(function() 
   {
       //get the initial height of every div
       var originalHeight = $(this).height(); 
       //get the new body width
       var bodyWidth = $("body").width(); 
       //get the difference in width, needed for hight calculation 
       var widthDiff = bodyWidth - originalWidth; 
       //new hight based on initial div height
       var newHeight = originalHeight + (widthDiff / 10); 
       //sets the different height for every needed div
       $(this).css("height", newHeight); 
   });
}
person Gabe    schedule 16.06.2012

arrow_upward
0
arrow_downward

взгляните на событие изменения размера, которое вы можете связать с jquery

http://api.jquery.com/resize/

person Nir    schedule 16.06.2012

arrow_upward
0
arrow_downward

используйте .data для хранения начального размера div внутри вашей функции $.each

$(this).data('height', $(this).height());
$(this).data('width', $(this).width());

вы можете позже получить старые размеры в обратном вызове изменения размера

var old_height = $(this).data('height');
var old_width = $(this).data('width');

Надеюсь это поможет

person chris_code    schedule 16.06.2012
comment
Не могу заставить его работать, используя .data. Но это может быть моя вина, у меня так мало опыта в javascript. Спасибо, в любом случае. - person theCoder; 17.06.2012