私はダイナミックコンテンツをロードしましたは私のテンプレートです。デフォルトのdiv背景色は黄色ですが、コンテンツが300pxより長い場合、背景色を赤に変更するクラスをトグルまたは追加します。以下はコードです。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>
あなたはこのような何か見て、あなたのhtmlを変更した場合、この
$(document).ready(function(){
$(".short").each(function(){
if($(this).height() > 300){
$(this).removeClass("short").addClass("long");
}
});
});
それは動作していないか、ここで紛失しています： – johnmiami
このコンテンツはサーバーからレンダリングされるのですか、AJAXを使用してクライアント側からロードされますか？ – ShankarSangoli
$('div.short, div.long').each(function(){
if($(this).height() > 300) {
$(this).removeClass('short').addClass('long');
} else {
$(this).removeClass('long').addClass('short');
}
});
をお試しください：
$(document).ready(function() {
var $messageDiv = $("#messageDiv");
if($messageDiv.height() > 300) {
$messageDiv.toggleClass("long short");
}
});
<div id="messageDiv" class="short">div content</div>
を次にあなたがこのようないくつかのコードを使用することができます
しかし、コンテンツを動的に読み込む方法や高さをテストするタイミングを明確にする方法が明確でないため、大まかなアイデアです。
ダイナミックコンテンツはどのように読み込まれますか？コンテンツが動的に読み込まれた後であることを確認することができますか？ – rtpHarry