更新元素高度时,调整窗口大小
问题描述:
我有一个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>
高度设置仅在页面刷新。
答
替换此行,它会为你工作
var titleHeight = $(this).find('.post .post-header h3').removeAttr("style").height();
var teaserHeight = $(this).find('.post .post-header p').removeAttr("style").height();
+0
感谢您的帮助! –
答
请尝试删除p
,h3
。
这意味着,
(通过采取代码) $(this).find('.post .post-header').height();
代替$(this).find('.post .post-header p').height();
您可以发布您的html代码? – vel
发布您的html代码,是console.log打印? – Selvakumar
我编辑了帖子。 –