我有一个JS代码:更新元素高度时,调整窗口大小
var setPostHeaderHeightsInSlider = function() {
var titlesHeight = 0;
var teasersHeight = 0;
$('.posts-slider .post-item').each(function() {
var titleHeight = $(this).find('.post .post-header h3').height();
var teaserHeight = $(this).find('.post .post-header p').height();
if (titleHeight > titlesHeight) {
titlesHeight = titleHeight;
$('.posts-slider .post-item .post .post-header h3').css('height', titlesHeight);
}
if (teaserHeight > teasersHeight) {
teasersHeight = teaserHeight;
$('.posts-slider .post-item .post .post-header p').css('height', teasersHeight);
}
});
};
var onResize = function() {
console.log('resize');
setPostHeaderHeightsInSlider();
};
$(document).ready(function() {
onResize();
$(window).on('resize', function(){
onResize();
});
}
我需要的元素更新的高度时,窗口大小调整,但我的代码不能正常工作。
我在控制台中看到文本,但高度不更新。
@edit:
我把我的html代码。
HTML:
<div class="posts-slider swiper-container w-100 fl">
<div class="swiper-wrapper">
<div class="post-item swiper-slide ph4 pt3">
<a href="artykul.html" class="w-100 fl">
<article class="post w-100 fl">
<figure class="post-photo w-100 tc fl ma0 relative">
<img src="img/post_01.jpg" alt="Post 01" class="dib mw-100">
</figure>
<header class="post-header w-100 tl fl">
<h3 class="ma0 mt3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<p class="ma0 mt3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, itaque, sapiente! Aliquid autem, deserunt dicta dolorum earum eius explicabo incidunt, modi natus temporibus ullam ut vel voluptatum? Libero recusandae, unde?</p>
</header>
<footer class="post-footer w-100 tl fl">
<p class="pv3 ma0 mt4">22 czerwca 2017</p>
</footer>
</article>
</a>
</div>
</div>
</div>
高度设置仅在页面刷新。
您可以发布您的html代码? – vel
发布您的html代码,是console.log打印? – Selvakumar
我编辑了帖子。 –