1. 首页
  2. 问答
  3. 如何将独立的CSS样式应用于与JS循环中的div？

如何将独立的CSS样式应用于与JS循环中的div？

2017-07-07 80 views
0

我有两个div，每个div包含两个嵌套的div。如果其中一个嵌套div比另一个更高，我想要应用某些CSS样式。如何将独立的CSS样式应用于与JS循环中的div？

我设法警报正常工作，但我一开始有点困惑的CSS样式似乎适用于这两种申报单。

与完成这一关任何帮助将不胜感激。

继承人的演示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'); 
    } 
    }); 
}

来源

2017-07-07 user2498890

+0

我已经更新了小提琴https://jsfiddle.net/Lhn5uxeq/4/ – Shiladitya

回答

1

你要申请的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'); 
    } 
    });

来源

2017-07-07 10:32:56 Vineesh

+0

谢谢您的回答！ – user2498890

1

您必须指定.slideshow-info就是一个孩子。你这样做，像这样$('.slideshow-info', this)

$(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', this).css('background-color', 'red'); 
 
    } else { 
 
     alert('info is shorter than image'); 
 
     $('.slideshow-info', this).css('background-color', 'blue'); 
 
    } 
 
    }); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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="1"> 
 
    <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>

来源

2017-07-07 10:33:33

+1

完美谢谢你解释！ – user2498890

+0

坚持 - 我不确定这是否正常工作？ – user2498890

+0

它在做什么？ –

相关问题

 相关问题