1. 首頁
  2. 問答
  3. 如何將獨立的CSS樣式應用於與JS循環中的div？

如何將獨立的CSS樣式應用於與JS循環中的div？

2017-07-07 76 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

它在做什麼？ –

相關問題

 相關問題