Javascript 如何使用jQuery隐藏div

我在index.html文件中有一个id=“menu”的div，我想用jQuery隐藏它。在我的script.js中，我写道：

window.onload = function() {
  prepareEventHandlers();
}

function prepareEventHandlers() {
  var hideDiv = $("#menu");
  var crtButton = $("#hide");
  crtButton.onclick = function() {
    hideDiv.hide();
  };
 }

但当我按下网页上的按钮时，div仍然存在，唯一有效的方法是在index.html中写入：

 <button type="button" onclick="$('#menu').hide()" id="hide">HideDiv</button>

HideDiv

---

但是我不想使用它，因为它的样式不好，所以我如何使用我的script.js代码来实现这一点呢？

crtButton.onclick

不起作用，因为

crtButton

是一个jQuery对象，而不是DOM元素

改为这样做：

$(document).ready(function() {
    $("#hide").on("click", function() {
        $("#menu").hide();
    });
}

---

这是jQuery的方式。请注意，我用回调替换了

window.onload

，在DOM准备就绪后将立即调用回调（比

onload

更早）。我还使用该函数绑定到事件。

使用Lucas的答案或修改您自己的代码

crtButton

是一个jquery对象，因此它没有

onclick

属性。改为编辑DOM元素的onclick属性（即

crtButton[0]

）

或者跳过jQuery，使用

getElementById

    window.onload = function() {
      prepareEventHandlers();
    }

    function prepareEventHandlers() {
      var hideDiv = document.getElementById("menu");
      var crtButton = document.getElementById("hide");
      crtButton.onclick = function() {
        hideDiv.style.display = 'none'
      };
     }

---

或者您可以执行

$（crtButton）。单击（…

crtButton已经是一个jQuery对象。您不必重新查询它

crtButton。单击（function（）{}）

将起作用。也就是说，

.on（'click'，function（）{}）

是较新且首选的方法，除非该按钮是动态的，否则无需使用。在上，.click将执行相同的操作。我没有说它不起作用。它更好，因为它可以与动态元素一起工作，并且可以轻松使用unbound@tymeJV动态是什么意思？就像Lucas提到的，

crtButton

是一个jQuery对象他的代码或在您的代码中使用

crtButton[0]。onclick

我按照您建议的方式进行了尝试，但我收到一个类型错误，表示hideDiv不是函数，它被抛出到hideDiv.hide（）行；知道为什么吗？但不会显示“none”将其完全从DOM树中拉出？我正试图避免这种情况，因为如果用户请求，我可能会将其带回来。它只是隐藏了它。您可以执行

hideDiv.style.display='

来显示它，您可能应该坚持使用jQuery IMO，并学习它的API。这将为您节省大量时间和精力从长远来看，这是一个错误。