Question

以下脚本在加载和窗口大小调整时为特定容器中的div提供相等的高度。它来自http://stephenakins.blogspot.gr/2011/01/uniform-div-heights-for-liquid-css-p.html

它适用于加载，但使用jQuery 1.9.0，该功能不适用于窗口大小调整。如果我将jQuery版本更改为1.5.0，则调整大小有效。我使用了jQuery migrate插件，但它没有给出任何警告或错误。是否与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();
});

Answer 1

我认为您的问题是您使用data()。在jQuery 1.9.0中，元素的data-*属性中保存的值仅在第一次使用data()在DOM中遍历元素时读取。

而不是使用data('originalHeight)，而是使用attr('data-originalHeight')，因为这会在每次调用时重新读取值。

脚本不能使用jQuery 1.9.0

1 个答案: