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类的页面将调整为最大高度。

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

2 个答案: