2017-08-03 9 views
1

のサイズを変更する場合:更新要素の高さが、私は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> 

高さは、ページが更新されたときにのみ設定されています。

+0

あなたのhtmlコードを投稿することができますか? – vel

+0

あなたのHTMLコードを投稿してください、console.logの印刷ですか? – Selvakumar

+0

投稿を編集しました。 –

答えて

1

のは、この行を置き換え、それはあなたのために働くだろう

var titleHeight = $(this).find('.post .post-header h3').removeAttr("style").height(); 
    var teaserHeight = $(this).find('.post .post-header p').removeAttr("style").height(); 
+0

助けてくれてありがとう! –

0

ph3を削除してコードを試してください。
それは意味 、
(あなたのコードを取ることによって) $(this).find('.post .post-header').height();代わり
$(this).find('.post .post-header p').height();

関連する問題