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

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

javascript html jquery

Javascript 如何根据页面上是否存在另一个div来隐藏div？,javascript,html,jquery,Javascript,Html,Jquery,我试图根据页面上存在的另一个div来隐藏一个div 以下是我的HTML和JavaScript： //iLife将`$`启用为jQuery ; （函数（$）{ //文件准备就绪 $（函数（）{ $（文档）.ready（函数（）{ var$description=document.querySelector（“coach2.et#u pb_blurb_description”）；如果（$description.length）{ $（'coachtwocol'）.hide（）； } }); })（

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

以下是我的HTML和JavaScript：

//iLife将`$`启用为jQuery
;
（函数（$）{
//文件准备就绪
$（函数（）{
$（文档）.ready（函数（）{
var$description=document.querySelector（“coach2.et#u pb_blurb_description”）；
如果（$description.length）{
$（'coachtwocol'）.hide（）；
}
});
})（jQuery）；


教练：

#coach2.et_pb_blurb_description

查找ID为“coach2”且类为“et_pb_blurb_description”的单个元素

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

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();
      }
  }

您的代码中有几个输入错误导致了奇怪的行为。首先，如@Utkanos提到的

#coach2.et_pb_blurb_description

正在寻找一个不存在的元素，如

。您可能希望使用带有

#coach2.et_pb_blurb_description

空格的选择器来选择任何具有cla的元素

eb\u pb\u blurb\u description

的子元素，其ID为

coach2

如果当前运行脚本，则会出现错误：

Uncaught SyntaxError:input意外结束

，因为缺少一组结束符）}。此外，您还有多个语法稍有不同的

onready

函数，可以进行清理

删除重复的

onready

功能并修复选择器：

//iLife将`$`启用为jQuery
（函数（$）{
变量$description=$（“#coach2.et#pb#u blurb#u description”）；
如果（$description.length）{
console.log（'description exists'）；
$（'coachtwocol'）.hide（）；
}否则{
console.log（'说明不存在'）；
}
})（jQuery）

教练：
试试下面这段代码吧
<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>


指数
$（文档）.ready（函数（）{
var$description=document.queryselectoral（“coach2”）；
如果（$description.length>=0）{
$（'coachtwocol'）.hide（）；
}
});
教练：
此行是否存在复制和粘贴错误<代码>$（文档）.ready（函数（）{

您的逻辑中有两个文档ready。您只需要一个，并且可以使用

jQuery（函数（$）{}）

避免外部生命。这回答了你的问题吗？呃，所以你忽略了他们没有使用jQuery进行查找…你需要

et_pb_blur_description上的类选择器

嗨，Utkanos，我以前尝试过这段代码（使用id和类之间的空格），但运气不好，我想这应该是“$（“#coach2.et#pb_blurb_description”）“是的，我这方面做得不好，我很快就完成了。现在更正了。是的，Josh，你认为是正确的。@Utkanos谢谢你的确认，但这段代码似乎对我仍然不起作用？还有其他想法吗？会出什么问题吗？谢谢你的回复，顺便说一句：）您好@WOUNDEDStevenJones我在JSFIDLE中尝试过这段代码，它工作得很好，但由于某种原因，在网站上尝试实现它时出现了一个问题。我在控制台中得到了“Uncaught TypeError:无法读取未定义的属性'concat'。此脚本中没有任何内容包括连接（或名为

concat

）的属性），所以这听起来像是另一行代码给了你一个问题。你能在你的代码中查找

concat

或

.concat

？错误消息还应该包括一个行号，它会将你指向失败的地方。可能你有类似

test.concat

的东西，但是

test

没有定义，所以它是错误的他犯了那个错误。