jQuery 根据内容高度在加载时切换 div 类

【问题标题】：jQuery Toggle div class on load depending on the content heightjQuery 根据内容高度在加载时切换 div 类
【发布时间】：2012-08-06 20:00:08
【问题描述】：

我的模板上有一个加载的动态内容。默认的 div 背景颜色是黄色，但是当内容超过 300 像素时，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>

【问题讨论】：

您的动态内容是如何加载的？有没有什么地方可以挂钩，我们可以确定它是在内容完成动态加载之后？

标签： javascript jquery css toggle

【解决方案1】：

试试这个

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

});

【讨论】：

此内容是从服务器渲染还是您使用 AJAX 从客户端加载？
来自服务器：
placehold.it/200x200"></div>
placehold.it/200x310"></div> 他们都出来黄色 - 无法粘贴整个代码没有足够的空间
我看到您有多个具有“short”类的 div。您是否希望这些 div 的组合高度大于 300？
没关系，我犯了一个错误，完美运行。原始代码很好： $(document).ready(function(){ if($(".short").height() > 300){ $(".short").removeClass("short").addClass ("长"); } });

【解决方案2】：

如果您将 html 更改为如下所示：

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

然后你可以使用如下代码：

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

但这只是一个粗略的想法，因为它不清楚您如何动态加载内容以及我们如何知道何时测试高度。

【讨论】：

【解决方案3】：

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

【讨论】：