javascript - 如何使用 JS 将单独的 CSS 样式应用于循环中的 div？

Question

我有两个 div，每个 div 包含两个嵌套的 div。如果其中一个嵌套 div 的高度高于另一个，我希望应用某些 CSS 样式。

我已经设法让警报正常工作，但是我有点困惑，因为 CSS 样式似乎适用于两个 div。

如果您能帮助完成这项工作，我们将不胜感激。

这是演示 https://jsfiddle.net/Lhn5uxeq/3/

HTML

<div class="slideshow" data-id="1">
  <div class="slideshow-info">
    <h1>
     Header
    </h1>
    <p>
     Text
    </p>
  </div>
  <div class="slideshow-image">
    <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
  </div>
</div>
<div class="slideshow" data-id="2">
  <div class="slideshow-info">
    <h1>
     Header
    </h1>
    <p>
     Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
    </p>
  </div>
  <div class="slideshow-image">
    <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
  </div>
</div>

JS

$(document).ready(function(){
  calculateHeight();

  $(window).resize(function() {
    calculateHeight();
  });
});

function calculateHeight() {
  $('.slideshow').each(function() {
    $('.slideshow-info', this).each(function() {
      slideInfoHeight = $(this).height();  
    });
    $('.slideshow-image', this).each(function() {
      slideImageHeight = $(this).height();  
    });

    if(slideInfoHeight > slideImageHeight) {
      alert('info is taller than image');
      $('.slideshow-info').css('background-color', 'red');
    } else {
      alert ('info is shorter than image');
      $('.slideshow-info').css('background-color', 'blue');
    }
  });
}

Answer 1

您必须仅在该特定幻灯片中为 div 应用 css。下面的代码将起作用。 https://jsfiddle.net/Lhn5uxeq/5/

function calculateHeight() {
  $('.slideshow').each(function() {
    $('.slideshow-info', this).each(function() {
      slideInfoHeight = $(this).height();  
    });
    $('.slideshow-image', this).each(function() {
      slideImageHeight = $(this).height();  
    });

    if(slideInfoHeight > slideImageHeight) {
      alert('info is taller than image');
       $( this ).find( '.slideshow-info' ).css('background-color', 'red');
    } else {
      alert ('info is shorter than image');
      $( this ).find( '.slideshow-info' ).css('background-color', 'blue');
    }
  });