2014-12-20 3 views
1

Следующий скрипт дает равные высоты для div в определенном контейнере при загрузке и изменении размера окна. Он исходит от http://stephenakins.blogspot.gr/2011/01/uniform-div-heights-for-liquid-css-p.htmlСценарий, не работающий с jQuery 1.9.0

Он работает при загрузке, но с jQuery 1.9.0 функция не работает при изменении размера окна. Если я изменил версию jQuery на 1.5.0, то это изменит размер. Я использовал плагин миграции jQuery, но он не дает никаких предупреждений или ошибок. Есть ли какая-либо несовместимость с синтаксисом 1.9.0? Есть идеи?

// these are (ruh-roh) globals. You could wrap in an 
// immediately-Invoked Function Expression (IIFE) if you wanted to... 
var currentTallest = 0, 
    currentRowStart = 0, 
    rowDivs = new Array(); 

function setConformingHeight(el, newHeight) { 
    // set the height to something new, but remember the original height in case things change 
    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"))); 
    el.height(newHeight); 
} 

function getOriginalHeight(el) { 
    // if the height has changed, send the originalHeight 
    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")); 
} 

function columnConform() { 

    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it. 
    $('.equalize > .col').each(function() { 

     // "caching" 
     var $el = $(this); 

     var topPosition = $el.position().top; 

     if (currentRowStart != topPosition) { 

      // we just came to a new row. Set all the heights on the completed row 
      for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); 

      // set the variables for the new row 
      rowDivs.length = 0; // empty the array 
      currentRowStart = topPosition; 
      currentTallest = getOriginalHeight($el); 
      rowDivs.push($el); 

     } else { 

      // another div on the current row. Add it to the list and check if it's taller 
      rowDivs.push($el); 
      currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); 

     } 
     // do the last row 
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); 

    }); 

} 


// Dom Ready 
// You might also want to wait until window.onload if images are the things that 
// are unequalizing the blocks 
$(function() { 
    columnConform(); 
}); 


// Window resize functions 
$(window).resize(function() { 
columnConform(); 
}); 
+0

Неужели консоль отображает любую ошибку? –

+0

Я сделал jsfiddle, и у него нет проблем с jQuery 1.9.1 при изменении размера, но он по-прежнему не работает над моим кодом, в то время как консоль не отображает ошибок. http://jsfiddle.net/drivebass/fax0v36a/1/ – drivebass

ответ

2

Я думаю, что ваша проблема здесь в использовании data(). Значения jQuery 1.9.0, хранящиеся в атрибуте элемента data-*, считываются только при первом перемещении элемента в DOM с использованием data().

Вместо того, чтобы использовать data('originalHeight), вместо этого используйте attr('data-originalHeight'), так как это будет перечитывать значение каждый раз, когда оно вызывается.

+0

Сценарий использует данные для хранения высоты элемента не как атрибута html5. Ваше предложение добавляет атрибут данных к элементам, и, к сожалению, это не устраняет проблему. Я сделал jsfiddle, и он работает с 1.9.1, но все еще проблематичен в моем коде. Не могу понять. http://jsfiddle.net/drivebass/fax0v36a/1/ – drivebass

+0

Я принимаю это как ответ, потому что он указал на правильное направление скрипта: t обновляет высоты элементов. Я нашел модифицированный скрипт здесь http://codepen.io/micahgodbolt/pen/FgqLc, который работает лучше! благодаря – drivebass