使用javascript在一个元素上设置高度以匹配另一个元素

Question

我有以下代码，正如标题说明的那样，它匹配页面上的两个元素以具有相同的高度：

//get sector sub navigation height
$(function() {

sectorHeight();

if(window.attachEvent) {
    window.attachEvent('onresize', sectorHeight);
}
else if(window.addEventListener) {
    window.addEventListener('resize', sectorHeight);
}

//get profile sub navigation height
profileHeight();

if(window.attachEvent) {
    window.attachEvent('onresize', profileHeight);
}
else if(window.addEventListener) {
    window.addEventListener('resize', profileHeight);
}

});


function sectorHeight() {
    var secHeight = $('#sector-content').height();
    $('.content-sub-nav').css('height', secHeight);  
}

function profileHeight() {
    var secHeight = $('.profile-article').height();
    $('.mod-profile-search').css('height', secHeight);  
}

当前，这在两个使用不同元素的不同页面上被调用。 我该如何编辑它以仅使用在页面加载和调整大小时都被调用的单个函数？

Answer 1

或者，也许您可​​以使用这种方法：

function fixHeights(){
    $('.js-same-height').each(function(){
        var self = $(this);
        var target = $(self.data('target'));
        self.height(target.height());
    });
}

它应该适用于同一页面上的多个不同元素。 您为动态元素提供类“ js-same-height”和属性“ data-target =“。css-selector”“，其中“ .css-selector”是要复制其元素的选择器高度。

这是如何在resize事件上使用它：

$(window).on('resize', fixHeights);

要么：

$(window).on('resize', function(){
    fixHeights();
});

Answer 2

我觉得你在匹配两个高度。 除了采用这种方法，您可以执行以下操作：

function makeCorrectHeights() {
    var maxHeight = max($(".autoheight"));
    $(".autoheight").css('height', maxHeight);  
}

可以在任何页面中调用它，那些具有.autoheight类的页面将调整为最大高度。