如果另一个没有内容，如何隐藏一个div答案

【问题标题】：How to hide a div if another has no content如果另一个没有内容，如何隐藏一个div
【发布时间】：2021-02-15 21:13:17
【问题描述】：

我有一些代码，如果另一个为空，我需要隐藏一个 div。基本上，如果 .plant_profile_link 没有内容，就隐藏 .plant_profile_display

我的尝试

$(document).ready(function() {
  if (!$.trim($(".plant_profile_link").html()) == true)
    $(".plant_profile_display").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
  <div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body  et_pb_text_align_left et_pb_bg_layout_light">


  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

【问题讨论】：

您能告诉我们plant_profile_link 将包含什么类型的元素吗？
我给你做了一个sn-p。请在minimal reproducible example 中使用相关示例更新 HTML
看起来代码有效，但它真的很难看。不要否定然后比较真实if ($(".plant_profile_link").text().trim() === "")

标签： javascript html css wordpress

【解决方案1】：

如果我们添加 jQuery，你的代码就可以工作

我会用户切换

$(function() {
   $(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
  <div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body  et_pb_text_align_left et_pb_bg_layout_light">


  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

【讨论】：

这很好用，但有一个奇怪的地方——隐藏的 div 中的内容是一个链接。由于添加了代码，链接不再有效？显然这是在显示的链接上。这是网站，以防万一你想看：hydrangeaderby.co.uk/paniculata-brussels-lace-de-belder-1975
你把代码放在 jQuery 库之前。把它放在你加载 jQuery 之后。如果隐藏链接，链接将不起作用 - 这不是这段代码的目的吗？

【解决方案2】：

也许这样的东西适合你

$(document).ready(function() {
  var $plantLinks = $('.plant_profile_link')
  var $plantDisplay = $('.plant_profile_display')
 if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
   $plantDisplay.show();
 } else {
   $plantDisplay.hide();
 }
});

【讨论】：