如何根据页面上是否存在另一个 div 来隐藏 div？答案

【问题标题】：How do I hide a div based on whether another div is present on a page?如何根据页面上是否存在另一个 div 来隐藏 div？
【发布时间】：2020-08-20 06:56:14
【问题描述】：

我正在尝试根据页面上另一个 div 的存在来隐藏一个 div。

这是我的 HTML 和 JavaScript：

// IIFE to enable `$` as jQuery
;
(function($) {
  // document ready
  $(function() {
    $(document).ready(function() {
      var $description = document.querySelector("#coach2.et_pb_blurb_description");
      if ($description.length) {
        $('#coachtwocol').hide();
      }
    });
  })(jQuery);

<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>

如果.et_pb_blurb_description 在#coach2 下不存在，则隐藏#coachtwocol（如果后端未填写div .et_pb_blurb_description，则不会将其加载到页面上）

我认为问题出在我的查询选择器上，但我不确定我做错了什么或如何解决它。

【问题讨论】：

这一行是复制粘贴错误吗？ $(document).ready(function() {
您的逻辑中有两个文档准备就绪。你只需要一个，你可以使用jQuery(function($){})来避免外部IIFE。
这能回答你的问题吗？ Check if a div exists with jquery

标签： javascript html jquery

【解决方案1】：

#coach2.et_pb_blurb_description 查找 ID 为“coach2”和类“et_pb_blurb_description”的 SINGLE 元素。

事实并非如此。您正在处理两个元素，一个是另一个的子元素，因此您的选择器中需要一个空格。

document.querySelector('#coach2 .et_pb_blurb_description')...

[编辑]

好的，如果它仍然无法正常工作，那么是时候进行一些调试了。使用选择器，永远不要假设它们与您认为它们做/应该做的匹配。所以让我们测试一下。我还将协调它们以使用 jQuery，因为您似乎将它用于一个而不是另一个。

  let $description = $("#coach2.et_pb_blurb_description"),
      toHide = $('#coachtwocol');
  if ($description.length) {
      console.log('Found selector 1');
      if (toHide.length) {
          console.log('Found selector 2');
          toHide.hide();
      }
  }

【讨论】：

Err，所以你有点忽略了他们没有使用 jQuery 进行查找...
你需要et_pb_blur_description上的类选择器
嗨 Utkanos，我之前尝试过这段代码（在 id 和类之间使用空格）但没有运气，我认为这意味着“$('#coach2 .et_pb_blurb_description')”
是的，就我而言，粗制滥造，我匆匆忙忙。现在更正了。是的，乔希，你猜对了。
@Utkanos 感谢您的确认，但这段代码似乎仍然对我不起作用？任何其他想法可能出了什么问题？感谢您的回复顺便说一句:)

【解决方案2】：

试试下面的代码对你有用

<DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
     $(document).ready(function() {
        var $description = document.querySelectorAll("#coach2");
        if ( $description.length>=0){
            $('#coachtwocol').hide();
        }
    });
</script>
<body>
    <div id="coachtwocol">
        <div id="coach2">
          <div class="et_pb_blurb_content">
                <div class="et_pb_blurb_container">
                      <h4><span>Coach:</span></h4>
              <div class="et_pb_blurb_description"></div>
                  </div>
              </div>
          </div>
      </div>
</html>

【讨论】：

【解决方案3】：

您的代码中有几个拼写错误会导致奇怪的行为。首先，像@Utkanos 提到的#coach2.et_pb_blurb_description 正在寻找像<div id="coach2" class="et_pb_blurb_description"> 这样不存在的元素。您可能希望使用带有#coach2 .et_pb_blurb_description 之类的空格的选择器来选择类为eb_pb_blurb_description 的任何元素，这些元素是ID 为coach2 的元素的子元素。

如果您当前运行脚本，则会收到错误：Uncaught SyntaxError: Unexpected end of input，因为您缺少一组结束 )}。此外，您还有多个 onready 函数，它们的语法略有不同，可以清理。

删除重复的 onready 函数并修复您的选择器：

// IIFE to enable `$` as jQuery
(function($) {
  var $description = $("#coach2 .et_pb_blurb_description");
  if ($description.length) {
    console.log('description exists');
    $('#coachtwocol').hide();
  } else {
    console.log('description does not exist');
  }
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>

【讨论】：

嗨@WOUNDEDStevenJones 我已经在 JSFiddle 中尝试过这段代码，它工作正常，但由于某种原因，尝试在网站上实现它时出现问题。我在控制台中收到“Uncaught TypeError: Cannot read property 'concat' of undefined”。
此脚本中没有任何内容包含连接（或名为concat 的属性），因此这听起来像是给您带来问题的另一行代码。你能在你的代码中查找concat 或.concat 吗？错误消息还应包含一个行号，该行号将指向您失败的位置。可能你有类似 test.concat 的东西，但 test 是未定义的，所以它会抛出那个错误。