jQuery根據內容高度加載切換div類

我的模板上有一個動態內容加載。默認的div背景顏色是黃色，但是當內容長度超過300px時，div會切換或附加將背景顏色更改爲紅色的類。以下是代碼。jQuery根據內容高度加載切換div類

<!DOCTYPE html> 
<head> 
<title>Untitled Document</title> 
<style type="text/css" media="all"> 
.short {background-color:yellow;padding:30px; width:200px;} 
.long {background-color:red;padding:30px;width:200px;} 
</style> 
</head> 

<body> 
<div class="short">div content</div> 
</body> 
</html>

來源

2011-07-21 johnmiami

您的動態內容是如何加載的？有沒有什麼地方我們可以確定它是在內容完成動態加載後確定的？ – rtpHarry

試試這個

$(document).ready(function(){ 
    $(".short").each(function(){ 
    if($(this).height() > 300){ 
     $(this).removeClass("short").addClass("long"); 
    } 
    }); 

});

來源

2011-07-21 19:51:41 ShankarSangoli

它似乎沒有工作，或者我在這裏丟失： – johnmiami

此內容是從服務器呈現還是從客戶端使用AJAX加載？ – ShankarSangoli

從服務器：

他們都來了黃色 - 整個代碼沒有足夠的空間 – johnmiami

$('div.short, div.long').each(function(){ 
    if($(this).height() > 300) { 
    $(this).removeClass('short').addClass('long'); 
    } else { 
    $(this).removeClass('long').addClass('short'); 
    } 
});

來源

2011-07-21 19:54:00 PeeHaa

如果你改變了你的HTML看起來像這樣：

<div id="messageDiv" class="short">div content</div>

然後你可以使用一些像這樣的代碼：

$(document).ready(function() { 
    var $messageDiv = $("#messageDiv"); 
    if($messageDiv.height() > 300) { 
    $messageDiv.toggleClass("long short"); 
    } 
});

但這只是一個粗略的想法，因爲它不清楚你是如何動態加載內容以及我們如何知道何時測試高度。

來源

2011-07-21 19:59:11 rtpHarry

jQuery根據內容高度加載切換div類

回答

相關問題